0

<li>単一の流体に10個あるとしましょう<ul>。ブラウザのサイズを変更すると、<li>次の行に移動します。また、ページの中央に配置したい<ul>とします。

HTML：

<ul>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
</ul>

Css：

ul {
   text-align: center;
}

li {
    display: inline-block;
    text-align: left;
}

これで中央揃えになります<ul>が、明らかに10で、ページ/画面サイズが1行あたり<li>4つしかない場合は、最後の行の中央に2つあり、前の行の最初の行に揃えられません。<li><li><li>

私が達成しようとしていることがcssを使用してのみ実行できるかどうかはわかりません（各行が異なっていれば問題ない<ul>と思いますが、1つだけが必要です<ul>。

だから私はトリックがjqueryを使用して実行できるか、および/または実行する必要があるかどうか疑問に思いますか？

4

5 に答える 5

1

ulをdivを含む場所に配置し、その中心を揃えてから、ulを左に揃えてインラインブロックにする必要があります。

http://jsfiddle.net/pdfbG/

html

<div>
    <ul>
       <li>Test</li>
       <li>Lorem</li>
       <li>Another one</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
    </ul>
</div>

css

div {text-align:center;}
ul {
    margin:0;
    list-style:none;
    display: inline-block;
    text-align:left;
}

li {
    display: inline-block;
    text-align: left;
}
于 2013-02-27T11:51:55.050 に答える
0 
ul {
 text-align: center;
 display:table;
 width: 400px; //example
}

li {表示：インラインブロック; text-align：左; }

于 2013-02-27T11:40:20.570 に答える
0

幅の計算関数を使用する

width:calc(100%-your margins in px or %);

これはうまくいくと思います

于 2013-02-27T11:40:46.350 に答える
0

li要素を流動的にするには、要素の幅を10％にする必要があります。

li {
    display: inline-block;
    text-align: left;
    border: 1px #AAA solid;
    width: 10%;
    font-size: 14px;
    box-sizing: border-box;
    vertical-align: top;
}

http://jsfiddle.net/CdWaY/

于 2013-02-27T11:42:59.843 に答える
-1

幅を10％にするだけで、サイズが自動的に変更されます

width: 10%;
于 2013-02-27T11:37:42.200 に答える