CSSでDivsのLinkeブレークを防ぐ方法は？

Question

ウェブサイトのメニューを作成しています。各項目（ホーム、お問い合わせ、私たちについて）について私は背景色とサイズ125X30のテキストを使用します。 CSSでは、私が浮動小数点を使用するときは正しく動作します。しかし、フロートを外すと、家や連絡先などのすべてのアイテムが1つずつ降ります。私はフロートなしで1本の線の中で左から右へそれを必要とします。助けてください

Answer 1

Rajasekar、

CSSplayのステューニコルズは、フロートを使用せずに、次の水平方向のメニューがあります。

CSS

.menu {display:inline-block;} 
.menu {display:inline;} 
.holder {display:table;} 

.menu { 
    display:table-row; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    white-space:nowrap; 
    } 
.menu li {display:inline;} 
.menu a, .menu a:visited { 
    display:block; 
    float:left; 
    padding:4px 16px; 
    color:#000; 
    background:#d4d4d4; 
    border:1px solid #fff; 
    text-decoration:none; 
    } 
.menu a:hover { 
    color:#fff; 
    background:#08c; 
    } 

#wrapper1 {text-align:left;} 
#wrapper1 .holder {margin:0; 

HTML

<div id="wrapper1"> 
<div class="holder"> 
<ul class="menu"> 
<li><a href="#nogo">Tab One</a></li> 
<li><a href="#nogo">Tab Two: Longer</a></li> 
<li><a href="#nogo">Tab Three: Longest</a></li> 
<li><a href="#nogo">Tab Four</a></li> 

</ul> 
</div> 
</div> 

詳しい説明（ディスプレイ：インラインブロックの使用を含む）is on CSSplay。

Answer 2

フロートが動作している場合、私はそれを固執することをお勧めします - これは一般的な問題の原因であるので、後でクリアリング要素が必要な場合があります。

あなたが本当に浮いて行くことができない場合、あなたは、いくつかの可能性がありますが、私は、フロートが最善の方法だと思いますdisplay: inline-block

Answer 3

を使用することができます。

1. あなたは、ディスプレイにのdivのを設定することができます：インラインブロックを（しかし、私はそれをお勧めしません）
   • また、あなたは絶対配置を行うことができ、これも何のきちんとした解決策ではありません。

Answer 4

あなたの項目ブロックレベル要素内で、おそらくです（例：DIV、李、P）。

要約：最後の要素の下にある要素をブロックします。インライン、最後のものの隣に。

インラインでアイテムを作成する必要があります。ブロックレベルのタグをインライン（例：span）に置き換えるか、display: inlineまたはdisplay: inline-blockでスタイルを変更するだけです。