CSS display" list-item"有什么用?如果没有显示"列表"?

时间:2014-10-15 13:04:52

标签: html css list responsive-design

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

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

得到这个:

&#13;
&#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;
&#13;
&#13;

无法让我到任何地方。

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

谢谢!

4 个答案:

答案 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”嵌套在其中,然后使用伪元素创建项目符号:

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>

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

答案 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对用户代理样式表中的元素应用了一些paddingmargin。例如,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