ul li第二行文字在使用li之前没有正确对齐:之前

时间:2015-01-07 04:06:56

标签: javascript jquery html css

这是一个常见的问题,但似乎我无法解决它。我试图寻找答案,但仍然没有解决我的问题。

我有一个ul li。 li设置为list-style:none,我使用li:之前放置自定义项目符号。

我遇到的问题是当容器很小时,第二行文字不会与上面的文字对齐。

enter image description here

我想要获得与右上图相同的结果。 如何完美地对齐第二行文字?

感谢您的帮助。

编辑:

This is my sample code from <a href="http://jsfiddle.net/bo1nvxop/">jsfiddle</a> 

2 个答案:

答案 0 :(得分:1)

尝试为position: absolute;伪类设置:before。这样,您就可以将子弹放在任何位置,而不会影响元素中的文本。

答案 1 :(得分:1)

以下是使用+作为要点的工作示例。根据您将用于项目符号的字符,您可能需要调整否定文本缩进。

&#13;
&#13;
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
  text-indent: -0.825em;
}

ul li:before {
  content: "+ ";
}
&#13;
<ul>
  <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
  <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
</ul>
&#13;
&#13;
&#13;