Question

我有一个div列表，每个元素中都有段落。我想将它视为无序列表，并在每个div的左侧显示一个自定义项目符号。但是，我得到了div之上的子弹。

The fiddle显示了我的问题以及我希望看到的内容。

如果使用这个html结构无法实现这一点，我很乐意听到其他一些建议。

Answer 1

使用position:absolute：

ul {
  width: 300px;
  list-style: none;
  padding:0;
}

li {
  margin:0 0 40px;
  padding-left: 30px;  
  position:relative;
}

li:before {
  content: "+";
  padding-right: 30px;
  display:inline-block;
  position:absolute;
  left:0;
}

<ul>
    <li>
      <div>
        <p>This is out of place</p>
        <span>some other thing that wants to be here</span>
      </div>
    </li>
    <li>This works as intended some other thing that wants to be here</li>
  </ul>

Answer 2

你可以用绝对定位来做到这一点，但我通常更愿意尽量避免定位。

最终，我只是将div设置为与直接li标签相同的缩进，然后浮动+。

＆＃13;

ul {
  width: 300px;
  list-style: none;
}

li {
  margin: 40px;
  padding-left: 0px;
}

li > div { margin-left: 40px;}

li:before {
  content: "+";
  display: block;
  float: left;
  padding-right: 30px;
}

＆＃13;

  <ul>
    <li>
      <div>
        <p>This is out of place</p>
        <span>some other thing that wants to be here</span>
      </div>
    </li>
    <li>This works as intended</li>
  </ul>

＆＃13;

Answer 3

我通常使用下面的css hack，而不使用任何<ul>或<ol> div：

display: list-item;
list-style-type: circle;

＆＃13;

div.list-div {
  display: list-item;
  margin-left: 1.3em;
  list-style-type: circle;
  background: #ccc;
}

＆＃13;

<div class="list-div">
  <p>This is out of place</p>
  <span>some other thing that wants to be here</span>
</div>

<div class="list-div">
  <p>This is out of place</p>
  <span>some other thing that wants to be here</span>
</div>

＆＃13;

Answer 4

向float: left; css声明添加li:before。 :before选择器在标记内容之前插入，而不是在标记之前插入。 http://www.w3schools.com/cssref/sel_before.asp。如果您使用浏览器的开发人员工具检查元素，则会在<li>标记内看到“+”。

li:before {
  content: "+";
  padding-right: 30px;
  float: left;
}

Answer 5

我同意Scott的观点，浮动是一个更好的选择，其他方法往往会打破布局定位。

我想更多地说明为什么li:before确实将它放在上面，这是因为从技术上讲，你想要它，在你的情况下，在段落之前，因此p:before将如下所示。

ul {
  width: 600px;
  list-style: none;
}

li {
  margin: 0px;
  padding-left: 0px;
}

li > div { margin-left: 0px;}

p:before {
  content: "+";
  margin-left: -18px;
  padding-right: 10px;
}

  <ul>
    <li>
      <div>
        <p>I am a paragraph</p>
        <span>That is why p:before works and not li:before</span>
      </div>
    </li>
    <li>This works as intended</li>
  </ul>

在div的一侧显示ul列表项目符号

5 个答案: