2

並べ替えられていないリスト要素がたくさんあります。これを実現するために、通常適用されるスタイルルールは次のとおりです。

#slide ul,li{
float:left;
list-style-type:none;
}

ulandli要素が通常行うように動作する要素の別の順序付けられていないリストを紹介する必要があります。これは互いに積み重ねられていますが、リストスタイルタイプはありません。これを実現するには、次のようにします。

.stack ul,li{
list-style-type:none
}
​

問題は、ul、liのスタッククラスのスタイルが適用されず、＃slideのul、liの場合と同じように、要素が隣り合ってスタックすることです。

このjsフィドルでそれをチェックしてください：

http://jsfiddle.net/G7JHK/

私のセレクターは間違っていますか？

PS：class / idと両方のさまざまな組み合わせでこれを試しましたが、結果は常に同じです。

4

5 に答える 5

5

セレクターのコンマが原因で、すべてのli要素にfloatleftを適用していました。次のようなものを試してください。 

<ul class="stack">
<li>element 1</li>
<li>element  2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element  4</li>
</ul>


#slide li{
 display:inline;   
}

このcssにより、divの「slide」内のすべてのリスト要素が連続して表示され、他のすべてのリスト要素は通常どおり表示され続けます。2つの異なるクラスを使用する必要がなくなります:)</p>

于 2013-01-03T17:11:48.270 に答える
4

あなたのCSSはそうあるべきです

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

</ p>

于 2013-01-03T17:08:44.190 に答える
3

私はあなたが次のようなものが欲しいと思います：

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

セレクターを見てください。クラススタック（ul.stack）を持つulを選択し、その子liを見つけます。

于 2013-01-03T17:08:51.543 に答える
3

セレクターに問題があります。同じ要素のクラスまたはIDが空白で区切られることはありません。それらはスペースなしである必要があり、子はスペースで区切られますが、'、'はそこで使用されません。したがって、コードでこれを試すことができます。

ul.stack li{
display:block;
}
ul#slide li{
float:left;
}

また、最初にHTMLタグ名を配置し、次に前の属性を配置する必要があります。

于 2013-01-03T17:19:30.713 に答える
1

問題は、スライドの子孫であるulを選択したが、ulのIDがスライドであるため、IDが。のコンテナを持つulがないため、機能しないことですslide。また、置くことにより,li、ページ上のすべてのリストアイテムを選択しています。#slide liコンテナIDが。のリストアイテムのみを選択する、が必要ですslide。あなたは必要ない#slide ulので、あなたの最終的なコードは

#slide li {
float:left;
}

http://jsfiddle.net/G7JHK/6/代わりに、IDの代わりにHTMLのスペースを節約するために


使用することもできますhttp://jsfiddle.net/G7JHK/7/ul:nth-of-type(2)

于 2013-01-03T17:37:26.537 に答える