divを含むHTML/CSSの水平（インライン）リスト

Question

各リスト項目がdivであり、それらのすべてが互いに隣り合わせになるように単純な水平リストを作成しようとしています。私が以下のコードを使用しようとすると、divは別々の行になります。ここで私が持っているものです：

HTML：

<ul id="navlist"> 
<li><div>...</div></li> 
<li><div>...</div></li> 
<li><div>...</div></li> 
</ul> 

CSS：私は私のdiv要素の最大幅と幅を与えることを試みているが、それはどちらか動作しません

#navlist li 
{ 
display: inline; 
list-style-type: none; 
padding-right: 20px; 
} 

。基本的に、彼らは別々の行に箇条書きの点なしで表示されます。

これを修正するための助けがありがとうございます、ありがとう！

Answer 1

#navlist li { display:inline } 
#navlist div { display:inline } 

ブロックがあなたの問題であるとして<div>を残したまま<li>インラインを作るためのGoogle clearfixのCSS。

また、サイズや余白を制御する場合は、<li>の場合はinline-blockが望ましい場合があります。

また、このデモに興味があるかもしれない：http://phrogz.net/JS/ul2menu/purecss_testsuite.html

あなた<li>内<div>を持っている理由私はわからないんだけど、私はあなたがあなたの理由を持っていると推定します。

Answer 2

そのような何か多分、リスト項目のfloat: left;をお試しください：要素はULが「勝ったことを意味し、流れの外に移動しますので、ULに高さを指定することを確認し、また

#navlist li 
{ 
float: left; 
list-style-type: none; 
padding-right: 20px; 
} 

任意の高さを持っています。また、この動作を修正するためにclearfixを使用することができます。

.clear:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clear 
{ 
    display: inline-block; 
} 

html[xmlns] .clear 
{ 
    display: block; 
} 

* html .clear 
{ 
    height: 1%; 
} 

あなただけ<ul>にclass="clear"を追加します。もっとに関する情報:)

Answer 3

リスト項目内の各divは、デフォルトでブロックとして表示されます。それらをインラインで表示すると、うまくいくはずです。

#navlist div, #navlist li 
{ 
    display: inline; 
} 
#navlist li 
{ 
    list-style-type: none; 
    padding-right: 20px; 
} 

Answer 4

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
ul { 
    background: #48D; 
    height: 35px; 
    line-height: 25px; 
    width: 300px; 
} 
li { 
    float: left; 
    list-style-type: none; 
    margin: 5px 0 0 5px; 
} 
li div { 
    background: #6AF; 
    padding: 0 5px; 
} 

HTML

<ul> 
    <li><div>Text</div></li> 
    <li><div>Text</div></li> 
    <li><div>Text</div></li> 
</ul>