如果没有显示“列表”，CSS显示“列表项”有什么用？

Question

我正在寻找使用来自 div 标签的列表项创建一个 HTML 列表元素。我知道有display:list-item，但如果我有这个：

 <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
 </ul>

得到这个：

.item { display: list-item};
.list { display: block };

<div class="list">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

什么都没有。

问题：
有没有办法使用<div> 标签获得<ul> 等价物，为什么display:list 不存在时会有display:list-item？

谢谢！

Answer 1

HTML 列表元素 - 例如 <ol>、<ul>、<dl> - 是 block-level elements 就像 <div> 是通用块级容器。

唯一的区别是用户代理在用户代理样式表中的元素上应用了一些padding、margin。例如，谷歌浏览器将以下内容应用于<ul> 元素：

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

可以看到，<ul> 右侧有padding，它允许在每个项目（左侧）旁边显示标记（项目符号）。否则它们会从盒子里伸出来，看不见。

因此，为了伪造<ul> 的效果，你最终会得到这样的结果：

.list {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 40px;
}

或者，我们可以通过将list-style-position: inside 赋予列表项，将标记的位置更改为框的inside。

Answer 2

使用list-item，您正在这样做：

该元素为内容生成一个块框和一个单独的列表项内联框

所以你需要定义列表项，这个属性允许你定义另一个属性，像这样：

.list > div {
    display:list-item;
    list-style-type: disc;
    list-style-position: inside;
}

查看Demo Fiddle

注意 >>

如果你想定义某种子弹类型的图像，我建议使用@Doctus 的答案方法，但如果你想要一些数字，让我们使用这个并将asterisks 更改为decimal

Answer 3

你所拥有的一切都会好起来的。您需要做的就是将list-style 属性添加到.list 项。

例如

.item {
    display: list-item;
    list-style: disc inside;
}

Answer 4

我什至不会理会display: list-item，创建一个容器，将 div“项目”嵌套在其中，然后使用伪元素创建项目符号：

http://jsfiddle.net/0j5uch7q/

.list
{
    display: block;
    padding-left: 20px;
}

.item
{
    display: block;
    margin-bottom: 2px;
    position: relative;
}

.item:before
{
    content: " ";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #000;
    position: absolute;
    left: -13px;
    top: 6px;
}

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<hr>

<div class="list">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

您可能想玩转定位，但这是它的基础。