为什么在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>

时）     

解决方法

        那是因为正常情况下，将

<li>

个元素的

display

设置为

list-item

。请参阅W3C CSS3规范：http：//www.w3.org/TR/css3-lists/#declaring-a-list-item。   要声明列表项，应将“ display”属性设置为“ list-item”。 注意，您可以为任意HTML元素提供相同的行为。例如在a8ѭ上设置

display: list-item

。     ,        更新的解决方案是使用ѭ9和ѭ10。 有关工作示例，请参见此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>

    ,        Martin的答案是正确的，但没有提供解决方案，Pappy的答案仅在您需要项目符号或轻松访问

li

标识符的含义时才有意义。在我的情况下，我需要将

ol

和ѭ14have一起使用，这样就不可能了。 对于我们而言，最快捷的方法是在

li

的直接子代上放置一个内联（

inline

，

inline-block

，

inline-flex

）以及

vertical-align: top

：

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>

,        一种获得效果的方法是：

<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;
}

    ,        

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>

用反增量解决

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>