我希望使用div标签中的列表项创建HTML列表元素。我知道有display:list-item
,但如果我有这个:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
得到这个:
.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}}?
谢谢!
答案 0 :(得分:2)
使用list-item
您正在执行此操作:
元素生成内容的块框和单独的列表项内联框
因此您需要定义list-item,此属性允许您定义另一个属性,如:
.list > div {
display:list-item;
list-style-type: disc;
list-style-position: inside;
}
选中此Demo Fiddle
注意&gt;&gt;
如果你想定义某种子弹类型的图像,我建议使用@Doctus答案的方法,但如果你想要一些数字,请使用这个,并将asterisks
更改为{{1 }}
答案 1 :(得分:1)
我甚至不打扰display: list-item
,创建一个容器,将div“items”嵌套在其中,然后使用伪元素创建项目符号:
.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>
你可能想要玩定位,但这是它的基础。
答案 2 :(得分:1)
你所拥有的将会很好。您需要做的就是在list-style
项目中添加.list
属性。
E.g。
.item {
display: list-item;
list-style: disc inside;
}
答案 3 :(得分:1)
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
。