我遇到了一个小问题，想知道是否有人可以想出一个快速修复方法？
问题
我有一个 lis 的 ul，它使用 li:before { content: 等自定义元素符号点。我试图让单词正确对齐 - 你可以在第四个 li 元素上看到，当单词换行时到下一行，它们不是从单词开始，而是从元素符号开始。
尝试修复
- 认为使用 li:before 做子弹是个问题，我尝试了其他方法，但是......
- 我不想使用内置的 li 元素符号样式(它们很丑)
- 我试过使用字体超棒的元素符号样式，但同样的事情发生了(我猜他们也使用 li:before 方法)
- 我不想手动将第二行隔开，因为要更改浏览器大小等等
- 使用 li:before 方法，我尝试使用绝对定位将元素符号向左移动:3 像素(如在类似的 stackoverflow 问题中所建议的那样)，但也没有成功。
示例
单击此处查看问题演示: http://jsfiddle.net/MS9Z9/
(以下代码略)
.panel-body ul li {
list-style-type:none;
}
.panel-body ul li:before {
content:"\27A8\00a0\00a0";
}
解决方案会很棒，但即使是想法也会受到赞赏，谢谢!
最佳答案
你可以做到
body .sidebar {
background-color: #ccc;
padding: 20px;
width: 330px;
float: right;
}
.panel-head {
background-color: #53d;
color: #fff;
padding: .3em;
text-align: center;
font-family: @fancyfont;
font-size: 1.2em;
}
.panel-body {
color: #aaa;
background-color: #fff;
}
.panel-body ul {
display: inline;
padding: 0;
}
.panel-body ul li {
padding: 0.5em 0.5em 0.5em 1.5em;
border-bottom-style: solid;
border-color: #ccc;
list-style-type: none;
margin: 0;
position: relative;
}
.panel-body ul li:last-child {
border-bottom-style: none;
}
.panel-body ul li a {
text-decoration: none;
}
.panel-body ul li a:visited {
color: #000;
}
.panel-body ul li:before {
content: "\27A8\00a0\00a0";
position: absolute;
left: 7px;
}
.panel-body ul li:hover,
.panel-body ul li:hover a {
background-color: #53d;
color: #fff;
}<div class="sidebar">
<div class="panel">
<div class="panel-head">
<p>Your Menu</p>
</div>
<div class="panel-body">
<ul>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
</ul>
</div>
</div>绝对定位before内容，让你的li相对定位，可以自由调整自定义元素符号
另一种方法是将 before 内容 float 到左侧
body .sidebar {
background-color: #ccc;
padding: 20px;
width: 330px;
float: right;
}
.panel-head {
background-color: #53d;
color: #fff;
padding: .3em;
text-align: center;
font-family: @fancyfont;
font-size: 1.2em;
}
.panel-body {
color: #aaa;
background-color: #fff;
}
.panel-body ul {
display: inline;
padding: 0;
}
.panel-body ul li {
padding: 0.5em;
border-bottom-style: solid;
border-color: #ccc;
list-style-type: none;
margin: 0;
}
.panel-body ul li:last-child {
border-bottom-style: none;
}
.panel-body ul li a {
text-decoration: none;
}
.panel-body ul li a:visited {
color: #000;
}
.panel-body ul li:before {
content: "\27A8\00a0\00a0";
float: left;
}
.panel-body ul li:hover,
.panel-body ul li:hover a {
background-color: #53d;
color: #fff;
}<body>
<div class="sidebar">
<div class="panel">
<div class="panel-head">
<p>Your Menu</p>
</div>
<div class="panel-body">
<ul>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
<li><a href="#">Lorem ipsum dolor</a>
</li>
</ul>
</div>
</div>
</body>关于html - 对齐使用自定义元素符号点时换行的 li 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24685355/