停止文本环绕css生成的内容？

Question

我在列表中使用CSS生成的内容。当列表文本足够长以包裹时，它向左移动太远。我希望文本在包装时保持内联。

<ul>
  <li>List item text</li>
  <li>List item with longer text</li>
</ul>
li {
  list-style: none;
  margin-bottom: 20px;
}
li:before {
  content: "+";
  color: red;
  margin-right: 10px;
}
ul {
  width: 120px;
}

http://codepen.io/anon/pen/uFchG

Answer 1

您可以略微更改您的CSS，使其成为position:aboluste;而li（父级）为position:relative;，然后将其略微移出。

<强> CodePen Example

li {
  list-style: none;
  margin-bottom: 20px;
  position:relative;
}

li:before {
  content: "+";
  position:absolute;
  color: red;
  left:-15px;
}

ul {
  width: 120px;
}

或者，你可以给li一个margin-left和:after left:-npx;，这样它们仍然在li元素中＃39边界。

Answer 2

尝试添加这两行

li {
  list-style: none;
  margin-bottom: 20px;
  padding-left: 1em;
  text-indent: -1em;
}

Answer 3

在ul中添加：

text-align:center;