0

水平方向の順序付けられていないリストがあり、div コンテナー (リストよりも任意に大きい) で水平方向に中央に配置します。ul をブロックとして表示し、自動マージンを使用してリストを親コンテナー内の中央に配置することを考えていました。しかし... ulをブロックとして表示し、100％の幅を取ることができないようです。

私が理解していることから、ブロック要素は子要素をラップするために必要な幅をとります(フロートがクリアされていないか、絶対配置されている場合を除きます)。ブロックとしてulとliを配置するとうまくいくはずです。残念ながらそうではなく、その理由がわかりません。

何か案が？

コードは次のとおりです。 http://jsfiddle.net/kccbg/1/

4

3 に答える 3

2

display: inline-block代わりに使用してみてtext-align: center、次のようにコンテナを設定してください。

HTML:

<div class="container">
    <ul>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
    </ul>
</div>​

CSS:

.container{
    width:100%;
    background-color:#CCC;
    height:20px;
    text-align: center;
}
ul{
    display:inline-block;
    margin:0 auto;
}
li{
    display:inline-block;
}

例

于 2012-06-19T19:39:02.517 に答える
2

更新: (gmeben からのコメントに基づく)

css を次のように変更します。

.container{width:100%; background-color:#CCC; text-align:center}
li{display:inline;}

そして取り除く

<li class="clear"></li>

html から。

フロート、クリア、インライン ブロックはありません (すべてのブラウザーでサポート/レンダリングが正しく行われるわけではありません)。

于 2012-06-19T19:41:51.763 に答える
0

リスト アイテムの合計幅がわかっている場合は、幅を<ul>設定し、マージンを 0 auto に設定できます。jsFiddle の例。

CSS

.container{
    width:100%; 
    background-color:#CCC; 
    height:20px;
}
ul{
    list-style:none;
    width:200px;
    margin:0 auto;
}
li{
    float:left; 
}

</p>

于 2012-06-19T19:40:06.320 に答える