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

【问题标题】：Stop text wrapping around css genareated content?停止围绕 css 生成的内容的文本环绕？
【发布时间】：2014-05-19 21:32:16
【问题描述】：

我在列表中使用 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

【问题讨论】：

尝试查看this 页面以获取多行填充的示例。

标签： css

【解决方案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 元素的边界内。

【讨论】：

【解决方案2】：

尝试添加这两行

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

【讨论】：

【解决方案3】：

在 ul 中添加：

text-align:center;

【讨论】：

这不是一个好的解决方案，因为容器宽度和 li 文本会有所不同。
这就是他问你的！