0

ボックスの応答中心のリストを作成したいと思います。
だから私は使用text-align:centerしましたが、最後の行も中央に配置されています: http://jsfiddle.net/NWmpL/1/

を密接に囲む追加のラッパーを使用しようとしていましたが<li>、
コンテンツを「密接に囲む」ことがわかっている唯一の方法は、display:inline
http://jsfiddle.net/NWmpL/2/を使用することです が、ここでは機能せず、柔軟にする必要があります(text-align:left私 の場合はブラウザ幅です）
width:200px

コンテンツを「密接に囲む」他の方法はありますか? または、他の解決策はありますか？

前もって感謝します。

より明確に: http://jsfiddle.net/NWmpL/6/

ここに画像の説明を入力 これをこれに変えたい ここに画像の説明を入力

4

4 に答える 4

1

display:inline-blockではなく、レイアウトに使用する必要がありますdisplay:inline。

display:inlineテキストコンテンツのみを対象としています。要素内にブロック コンテンツがあり、インライン動作が必要な場合は、inline-block代わりに常に使用する必要があります。

だから私はあなたのフィドルに行き、に変更しinlineましたinline-block。

何だと思います....それで問題は解決しました。希望どおりの外観になりました。

http://jsfiddle.net/NWmpL/8/を参照してください

float:leftこの種のレイアウトを実現するためにを使用することも検討できますが、 で有効な答えが得られたinline-blockので、そのままにしておきます。

于 2013-08-06T11:47:17.563 に答える
0

更新されたフィドルを確認してください: http://jsfiddle.net/4t6ha/2/

この別のアプローチを試してください。

CSS:

.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}

ul
{
list-style:none;
}

li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}
于 2013-08-06T09:15:48.883 に答える
0

追加

float:left;

に

.center li { }

フィドル

于 2013-08-06T09:13:05.970 に答える
0 
ul.center {
    display: table;
    margin: 0 auto;
    width:250px; }

ul.center li {
    display: block;
    float: left;
    width:75px; height:75px;    
    margin: 2px;
    list-style: none;
    background-color: #CCC; }
于 2013-08-06T09:13:23.423 に答える