Question

当让li成为内联块时，子弹点不再显示。

＆＃13;

ul {
  list-style-type: circle;
}
ul.columns>li {
  display: inline-block;
  padding-right: 1cm;
  margin-left: 20px;
}

＆＃13;

<h1>Vertical</h1>
<ul>
  <li><a class="openPage">Besoins en magnésium</a></li>
  <li><a class="openPage">Besoins en azote</a></li>
</ul>

<h1>Horizotal is missing bullets</h1>
<ul class="columns">
  <li><a class="openPage">Besoins en magnésium</a></li>
  <li><a class="openPage">Besoins en azote</a></li>
</ul>

＆＃13;

看我的小提琴http://jsfiddle.net/stephanedeluca/9xdkp3q7/2/

Answer 1

项目符号或列表样式图标仅适用于display: list-item css属性应用元素。默认情况下，此属性会应用于li元素，您现在可以通过应用display: inline-block来覆盖这些元素。因此，列表样式图标将消失。

看来你正试图让两个li元素相邻。那么，在这种情况下，你绝对应该使用display: inline-block。然后使用伪显示为list-item的伪类。这将解决您的问题。

ul.columns>li:before{
    content: "";
    display: list-item;
    position: absolute;
}

<强> Working Fiddle

Answer 2

这肯定不是最好的方式。但我确实记得这并没有任何其他确凿的结果......

ul.columns>li:before { content:'\ffed'; margin-right:0.5em; }

编辑：我知道答案已经发布了，但是我认为答案绝对定位并且整体效果不太好，而另一方面也过于复杂，不确定为什么需要进行相关定位？此外，通过这种方式已经为您排序间距。它只有2个属性，更简单。

Answer 3

首次创建列表时，默认display值设置为list-item。当您将其更改为display: inline-block;时，它将不再被识别为列表项。

以下是一些在列表上有良好信息的网站：

- http://www.w3.org/TR/css3-lists/#declaring-a-list-item

- http://css-tricks.com/almanac/properties/l/list-style/

Answer 4

您可以手动将项目符号添加到:before：psuedo-element。

＆＃13;

* {
  font-family: sans-serif;
}
ul {
  list-style-type: circle;
}
ul.columns>li {
  display: inline-block;
  padding-right: 1cm;
  margin-left: 20px;
}
ul.columns>li:before {
  content: '◦';
  position: relative;
  font-size: 1.3em;
  font-weight: bold;
  top: 1px;
  left: -3px;
}

＆＃13;

<h1>Vertical</h1>

<ul>
  <li><a class="openPage">Besoins en magnésium</a>
  </li>
  <li><a class="openPage">Besoins en azote</a>
  </li>
</ul>

<h1>Horizotal is missing bullets</h1>

<ul class="columns">
  <li><a class="openPage">Besoins en magnésium</a>
  </li>
  <li><a class="openPage">Besoins en azote</a>
  </li>
</ul>

＆＃13;

当li是内联块时，CSS li bullet不会显示

4 个答案: