Question

这似乎也适用于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>时）

Answer 1

这是因为通常display为list-item元素设置为<li>。请参阅W3C CSS3规范：http://www.w3.org/TR/css3-lists/#declaring-a-list-item。

要声明列表项，'display'属性应设置为'list-item'。

请注意，您可以为任意HTML元素提供相同的行为;例如，在display: list-item上设置<div>。

Answer 2

更新的解决方案是使用: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>

Answer 3

Martin的回答是正确的，但没有提供解决方案，只有你想要子弹或轻松访问li标识符的内容时，Pappy才有用。在我的情况下，我需要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>）属性。 for (var t = 0; t < 5; ++t) { var href = 'http://localhost:53008/authenticationcleaner/userprofile?id=' + t; var text = 'The ' + t + ' Family, ' + 'Address: ' + t; $('.families').append($('<a/>').attr('href', href).text(text)).append('<br/>'); }：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="families">

</div>

SELECT id, SourceName  
FROM OPENROWSET('Microsoft.ACE.OLEDB.12.0', 
'Excel 12.0; HDR=YES; IMEX=1; Database=D:\MyFolder\Configuration.xlsx', 'SELECT * FROM [Sheet1$]')

Answer 4

获得效果的方法是：

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

Answer 5

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>

为什么显示时列表样式消失：块被添加到列表中的列表项（<ul>或<ol>）？</ol> </ul>

5 个答案: