兩個並排按鈕

我想讓兩個超鏈接的按鈕並排走。我看到this question，但無法使答案正常工作。下面是我的兩個嘗試讓按鈕並排。第一次嘗試工作，但超鏈接到錯誤的位置。第二個超鏈接正確但不是並排。第三個基於this question沒有鏈接到任何地方，但我認爲這與使用鏈接而不是Javascript:submitRequests()有關。兩個並排按鈕

<!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就並排自動排隊一邊，因爲他們是在默認情況下display: inline-block（我認爲）。我想刪除float: left，因爲嵌套時可能會導致一些問題。

你永遠不應該嵌套窗體。它會導致一些非常棘手的事情。

但是，如果你想要兩個並排的表單，你可以通過向他們添加display: inline來做到這一點。這裏有一個小演示：http://jsbin.com/UgaMiYu/1/edit

onclick屬性應該沒有任何區別。

來源

2013-08-17 13:55:17

謝謝比爾我是一個新手。我更喜歡超鏈接功能的按鈕。 –

明白了！很高興你把它整理出來。 –

我只是試圖添加CSS試圖2.這個怎麼樣：

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：