用css順序排列按鈕

Question

根據前面的問題，我遇到了一些佈置一些水平按鈕的bug。故障肯定它與我對JavaScript或按鈕缺乏知識有關。

基本上我有頂部導航欄上的按鈕列表應該是內聯，但似乎堆疊。

每個按鈕的簡單需要到不同的頁面幀（是的，我知道幀是邪惡的，但這個項目需要呈現外部網頁和它適合這個目的http://webdesign.about.com/od/framesprosandcons/a/aaframesyuck.htm）

反正。當鏈接只是鏈接而不是按鈕時，它看起來像什麼。

http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=linkcorrect.jpg

這裏是鼓鼓的版本：

http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=buttonBug.jpg

這些鏈接代碼按鈕如下：

HTML

 <ul class = "links"> 
      <li> 
       <!--<a href="http://www.google.ie" target ="content">Test</a>--> 
       <form method="link" action="http://www.google.ie" target = "content"> 
        <input type="submit" value="google"> 
       </form> 

       | 
      </li> 
      <li> 
       <!--<a href="dashboard.html.erb" target ="content">Dash</a> |--> 
       <form method="link" action="http://www.google.ie" target = "content"> 
        <input type="submit" value="google"> 
       </form> 

       | 
      </li> 
      <li> 
       <!--<a href="pageview.html.erb" target ="content">Page</a> |--> 
       <form method="link" action="http://www.google.ie" target = "content"> 
        <input type="submit" value="google"> 
       </form> 

       | 
      </li> 
      <li> 
       <!--<a href="listview.html.erb" target ="content">List</a>--> 
       <form method="link" action="http://www.google.ie" target = "content"> 
        <input type="submit" value="google"> 
       </form> 

       | 
      </li> 
     </ul> 

CSS：

 ul li.prev { 
      float:left 
     } 
     .links { 
      margin: 0; 
      padding: 0; 
      background: #666; 
      text-align: right; 
     } 
     .links li { 
      display: inline; 
      padding: 0 5px; 
     } 

潛在的解決方案將改變按鈕從JavaScript到某種類型的JQuery UI，但他們只是簡單的鏈接。也許在我的CSS中缺少一些東西？

Answer 1

form是一個塊級元素，因此每個表單元素會出現在它自己的行。如果一個表單有兩個或多個按鈕，那麼這些按鈕將按預期方式內聯顯示。嘗試：

form { 
display: inline; 
} 

Answer 2

要使任何li水平，你必須漂浮它。您必須修改.links李

.links li{ 
padding: 0 5px; 
float: left; 
} 

請檢查該解決方案here

Answer 3

也可以顯示li爲inline-block的元素，如this