web-dev-qa-db-ja.com

display：ブロックがリスト内のリストアイテム（<ul>または<ol>）に追加されると、リストスタイルが消えるのはなぜですか？

これはdisplay: inline;とdisplay: inline-block;にも有効なようです。

これは私が意味することです：

ul li {
  display: block;
  /* Or display: inline; */
  /* Or display: inline-block; */
}

<ul>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ul>

リストスタイルとは、実際の「箇条書き」または「数字」を意味します（<ol>が使用されている場合）

htmlcsshtml-lists
25
Fredrik

これは、通常、list-item要素に対してdisplayが<li>に設定されているためです。 W3C CSS3仕様を参照してください： http://www.w3.org/TR/css3-lists/#declaring-a-list-item 。

リストアイテムを宣言するには、「display」プロパティを「list-item」に設定する必要があります。

任意のHTML要素に同じ動作を与えることができることに注意してください。たとえば、display: list-itemに<div>を設定します。

48
Martijn Pieters

更新された解決策は、:beforeとcontentを利用することです。

実用的な例については、このJSfiddleを参照してください。 http://jsfiddle.net/t72h3/

ul li {
  display: inline-block;
}

ul li:before {
  content: "• ";
}

<ul>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ul>
12
pappy

マーティンの答えは正しいですが、解決策を提供していません。パピーの答えは、箇条書きが必要な場合、またはliの識別子に簡単にアクセスできる場合にのみ関係します。私の場合、olとupper-alphaが必要なので、それは不可能です。

これを回避する最短の方法は、インライン（inline、inline-block、inline-flex）プロパティとvertical-align: topをliの直接の子に配置することでした。

ol {
  list-style: upper-alpha;
  
  > li {
    display: block;
  }
}

.list-item-content {
  display: inline-block; // any inline property will work
  vertical-align: top;
}
<ol>
  <li>
    <div class="list-item-content">Some text</div>
  </li>
</ol>
1
dwilt

効果を得る方法は次のとおりです。

<ol>
    <li>
        <a href="mylink">desc</a>
    </li>
</ol>

CSS：

li {
    list-style-position: inside;
    display: inline-block; /* or block */
}

li a {
    display: list-item;
    padding: 10px 20px;
}
1
Omer S

ulのソリューション

ul {
    list-style: none;
    display: block;
    padding: 0;
}

ul li::before {
  content: "• ";
}

<ul>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ul>

counter-increment を使用したolのソリューション

ol {
    list-style: none;
    display: block;
    padding: 0;
    counter-reset: my-counter;
}

ol li {
  counter-increment: my-counter;
}

ol li::before {
  content: counter(my-counter) ". ";
}

<ol>
  <li>list item1</li>
  <li>list item3</li>
  <li>list item3</li>
</ol>
0
Asher Garland