2つのボタンが並んでいます

2つのハイパーリンクボタンを並べて表示しようとしています。私はthis questionを見ましたが、答えを働かせることはできません。以下は、ボタンを横に並べる2つの試みです。最初の試行は機能しますが、間違った場所へのハイパーリンクがあります。 2番目のものは正しくハイパーリンクしますが、並んでいません。 this questionに基づく3番目はどこにもリンクされていませんが、私はJavascript:submitRequests()の代わりにリンクを使用しなければならないと思います。彼らは（と思う）、デフォルトでdisplay: inline-blockしているので、2つのボタンが並んでいます

<!DOCTYPE html> 
<html> 
    <body> 

    <head> 
     <style> 
      .container { 
       overflow: hidden; 
      } 

      button { 
       float: left; 
      } 

      button:first-child { 
       margin-right: 5px; 
      } 
     </style> 
    </head> 

    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank"> 
     <input type="submit" value="paste2"> 
    </form> 
    <form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank"> 
     <input type="submit" value="colSplit"> 
    </form> 

    Attempt 1 
    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank"> 
     <input type="submit" value="paste2"> 
      <form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank"> 
       <input type="submit" value="colSplit"> 
      </form> 
    </form> 

    Attempt 2 
    <form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank"> 
     <input type="submit" value="paste2"> 
    </form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank"> 
     <input type="submit" value="colSplit"> 
    </form> 

    Attempt 3 
    <div class="container"> 
     <button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button> 
     <button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text 
    </div> 

    </body> 
</html>

出典

2013-08-17 Tyler Rinker

jsのフィドルはいいでしょう – Itay

フォームの値をPOSTするか、ページにリンクするだけですか？ –

私はページにリンクする必要があります –

（もStyling an anchor tag to look like a submit button参照）：

<style> 
    .button { 
     appearance: button; 
     -moz-appearance: button; 
     -webkit-appearance: button; 
     text-decoration: none; 
     font: menu; 
     color: ButtonText; 
     display: inline-block; 
     padding: 2px 8px; 
    } 
</style> 

<div class="container"> 
    <a href="http://trinker.github.io/qdap_dev/paste2.html" class="button">paste2</a> 
    <a href="http://trinker.github.io/qdap_dev/colSplit.html" class="button">colSplit</a> text 
</div>

あなたも行うことができ<a href="..."><button>paste2</button></a>が、これはnot actually legal HTML5です。 FWIW、Firefoxはそれを正しくレンダリングするようです。

出典

2013-08-17 13:56:36

これは私が後にしたものです。 –

ボタンのように見えるリンクのスタイルを拡張できますか？ –

@TylerRinkerちょうど更新しました –

button sが自動的に並んで並ぶでしょう。ネスティングするときに問題が発生する可能性があるので、float: leftを削除します。

フォームを入れ子にしないでください。それは本当にかすかなものにつながるでしょう。

しかし、2つのフォームを並べて使用する場合は、display: inlineを追加することでそのようにすることができます。小さなデモは次のとおりです。http://jsbin.com/UgaMiYu/1/edit

onclickの属性はまったく違いがありません。あなただけの、ただ使用リンクを仕事やボタンのように見えるためにそれらのスタイルを無地のリンクが必要な場合は

出典

2013-08-17 13:55:17

ありがとうございますBill私はnewbです。私は、ハイパーリンク機能を備えたボタンの外観よりもずっと前でした。 –

あなたはそれを整理してうれしいです。 –

私はこのことについてどのように2を試みるようにCSSを追加しようとしました：

HTML：

<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank"> 
    <input type="submit" value="paste2"/></form> 
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank"> 
    <input type="submit" value="colSplit"/> 
    </form>

CSS：