2011-07-19 6 views
0

以前の質問によると、いくつかの横のボタンをレイアウトするバグが少しありました。失敗はjavascriptやボタンに関する私の知識の欠如と関係していると確信しています。cssでhorizo​​natallyボタンを注文する

基本的には、インラインになっているがスタックしているように見える上部のナビゲーションバーにボタンのリストがあります。

各ボタンのシンプルは、とにかく(はい、私は承知しているフレームは悪ですが、このプロジェクトは、外部のページをレンダリングする必要があり、それは、この目的http://webdesign.about.com/od/framesprosandcons/a/aaframesyuck.htmに合った)別のページに

をフレームになります。リンクが単なるリンクであり、ボタンではないときのように見える。次のようにボタンがあるとして、これらのリンクのための

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

コード:

http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=linkcorrect.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に欠けているものがありますか?

答えて

1

formは、したがって、すべてのフォーム要素は、独自の行に表示されるブロックレベル要素であるソリューションをご確認ください。 1つのフォームに2つ以上のボタンがある場合、ボタンはが期待どおりインラインで表示されます。試してみてください:

form { 
display: inline; 
} 
+0

私のミスのように、インラインブロック要素としてli表示することができます。フォームを含むliがインラインであれば、それは継承されると思った。私はそうは思わない。 – overtone

0

Liを水平にするには、浮動させる必要があります。あなたは.links李

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

を変更する必要がhere

関連する問題