html - 水平リスト内のリスト

Question

デザイン実験中です。CSSを正しく取得できないようです。各リスト項目にリストを持つ水平リストがあります。ネストされたリストが正しく動作していないようです。ここで何が間違っていますか？

ネストされたリストには二乗リストのタイプがなく、マージンがすべて間違っています。

score 2 · Accepted Answer

適用するものはすべて#tfList li、ネストされたリスト項目にも有効です (オーバーライドしない限り)。また、同じ ID を持つ 2 つの要素を持つべきではなく、代わりにクラスを使用してください。

score 1 · Accepted Answer

いくつかの問題：

1）@bfavarettoで述べたように、同じIDを持つ複数の要素を持つことはできません

~~2）「P」タグを閉じていません。クロージングタグにはスラッシュ（</p>）が付いています~~

3）ブロック要素を含む要素でdisplay：inlineを使用しています。これは無効 であり、良い習慣ではなく、問題が発生する可能性があります。代わりにインラインブロックを使用してください。

#some-item {
  display: inline-block;
  vertical-align: top;
  *display: inline;
  *zoom: 1;
}

編集：ヒント-特別な「子」セレクターを使用して、要素の直接の子のみを選択できます。http://jsfiddle.net/ryanwheale/F3cqD/

<ul>
  <li>
    Level 1
    <ul>
      <li>Level 2</li>
      <li>Level 2</li>
    </ul>
  </li>
  <li>Level 1</li>
</ul>

そしてこれらのスタイル

ul > li {
  color: red;
}
ul > li > ul > li {
  color: green;
}

score 1 · Accepted Answer

この問題は見落としがちですが、要素のdisplayプロパティをにオーバーライドし、誤ってに再設定しようとしたことが原因です。#tfList lidisplay: inlinedisplay: block;

リスト項目の正しい表示は次のとおりです。

display: list-item;

また、リスト項目の間隔を戻すには、ul要素の左パディングを設定します。

3 に答える 3