1

1行に常に3つのアイテムが表示される水平ULを作成しようとしています。トリッキーな部分は、アイテムの幅を変えることができるということです。例えば：

<ul class="items">
  <li>
   <input type="checkbox" id="work" />
    Work items
   </li>
  <li>
   <input type="checkbox" id="shopping" /> 
    Shopping
    </li>
  <li>
   <input type="checkbox" id="financial" />
    Financial Information & Tips
    </li>
</ul>

等

基本的に、テーブルを使用するのと同じように、1行に3つのアイテムが表示され、各アイテムのチェックボックスが常にテキストと同じ行に表示されるようにします。

どうすればいいですか？

これが私が使用している現在のコードですが、アイテムが均等に表示されません。多くの場合、最後のチェックボックスが1行目になり、テキストが次の行にプッシュされます。

ul.items
{
  text-align: center; 
  list-style-type: none;  
  width: 400px;
}

ul.items li
{
    display: inline;     
}
4

2 に答える 2

14

CSSnth-childセレクターを試してみてください。幅に関係なく動作します。

display:inline私もあなたのルールを削除し、 float:left;.

jsFiddle の例

ul.items li:nth-child(3n+4) {
  clear:left;
  float:left;
}

の詳細については、 https://developer.mozilla.org/en-US/docs/CSS/:nth-childnth-childを参照してください。

于 2013-01-17T18:01:49.917 に答える
4

これにはフロートを使うのが好きです 

ul.items
{
  text-align: center; 
  list-style-type: none;  
  width: 400px;
}

ul.items li
{
    float: left; 
    display: inline;     
}

.clear { clear: both; }

このhtmlで：

<ul class="items">
  <li>
   <input type="checkbox" id="work" />
    Work items
   </li>
  <li>
   <input type="checkbox" id="shopping" /> 
    Shopping
    </li>
  <li>
   <input type="checkbox" id="financial" />
    Financial Information & Tips
    </li>
  <li class="clear"></li>
</ul>

ここでのデモ：http：//jsfiddle.net/hG3Us/

于 2013-01-17T17:59:53.610 に答える