Question

我希望使用div标签中的列表项创建HTML列表元素。我知道有display:list-item，但如果我有这个：

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

得到这个：

＆＃13;

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

＆＃13;

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

＆＃13;

无法让我到任何地方。

问题：
有没有办法使用<ul>代码获取<div>等效代码？为什么display:list-item不存在display:list时会有{{1}}？

谢谢！

Answer 1

使用list-item您正在执行此操作：

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

因此您需要定义list-item，此属性允许您定义另一个属性，如：

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

选中此Demo Fiddle

注意＆gt;＆gt;

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

Answer 2

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

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>

你可能想要玩定位，但这是它的基础。

Answer 3

你所拥有的将会很好。您需要做的就是在list-style项目中添加.list属性。

E.g。

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

Answer 4

HTML列表元素 - 例如<ol>，<ul>，<dl> - 是block-level elements，类似于<div>，它是一个通用的块级容器。

唯一的区别是UA对用户代理样式表中的元素应用了一些padding，margin。例如，Google Chrome将以下内容应用于<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;
}

可以看出，padding右侧有<ul>，允许标记（项目符号）显示在每个项目旁边（左侧）。否则他们就会突然出现，无法看到。

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

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

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

CSS display＆＃34; list-item＆＃34;有什么用？如果没有显示＆＃34;列表＆＃34;？

4 个答案: