1

li タグのグループを希望どおりに整列させるのに苦労しています。

私はいくつかの基本的なhtmlを持っています

<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>​

そしていくつかのcss

.menu
{
 border:solid 2px red;
 width:520px;
}

ul
{
border:solid 1px #e5e5e5;
height:40px;
margin:0 auto;
list-style:none;
width:500px;
}

li{

text-align:center;
display:inline;
margin:10px;

}

各要素の li 幅をハードコーディングしたくありませんが、li 要素が ul 要素で利用可能なすべてのスペースを占めるようにしたいと考えています。

探している結果を得るには、何を変更する必要がありますか?

私のjsfiddleの試み

4

2 に答える 2

3

あなたの質問を理解している場合は、これに display:table プロパティを使用する必要があるかもしれません。次のように書きます。

ul
{
    border:solid 1px #e5e5e5;
    height:40px;
    margin:0 auto;
    list-style:none;
    width:500px;
    display:table;
}

li{
 display:table-cell;
 text-align:center;    
}

これをチェックしてくださいhttp://jsfiddle.net/XmcGh/2/

于 2012-04-06T05:25:45.083 に答える
0

display: table;がカットしdisplay: table-cell;ない場合は、パーセンテージ幅とフローティングを使用できます。そのようなことは、「ハードコードの制限なし」という要件に反しますが。パーセンテージは、さまざまなビューポート サイズで変化しますが。

これは、の数<li>が一定の場合にのみ機能します。

何かのようなもの：

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

ul {
width: 100%;
}
li {
float: left;
text-align: center;
width: 30%;
}
于 2012-04-06T07:32:20.963 に答える