Question

我有一个列表，其中一些项目很长，因此导致小型设备上的换行符。每个列表项都需要前面的>符号。我不想使用图片（例如列表样式图片）。所以我现在使用:before选择器，但理论上我也可以将它添加到每个列表项的开头。

现在我的问题。发生换行时，中断内容不会与其他内容对齐，而是从>符号下方开始。我希望它与其他内容保持一致。

这是我的示例代码：

HTML：

<ul class="test">
    <li>Text Text Text</li>
    <li>Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</li>
    <li>Text Text Text</li>
</ul>

CSS：

.test {
    list-style: none;
    margin: 0;
    padding: 0;
}
.test li:before {
    content: ">";
    padding-right: 15px;
}

我创建了一个FIDDLE。

我担心这可能是一个常见的问题，但我没有使用:before伪选择器为列表项图像找到任何解决方法。

Answer 1

您可以通过稍微更改标记来实现此目的;

<ul class="test">
    <li><div>&gt;</div><div class="one">Text Text Text</div></li>
    <li><div>&gt;</div><div class="one">Long Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div></li>
    <li><div>&gt;</div><div class="one">Text Text Text</div></li>

即＆gt;并且文本可以在单独的div中，然后您可以应用以下样式：

.test {
    list-style: none;
    margin: 0;
    padding: 0;
}

li > div{
    display:inline-block;
    height:100%;
    //background:red;
    width:5%;
    vertical-align:top;
}

.one{
    width:95%;
}

看小提琴：http://jsfiddle.net/SGz75/1/

缩进列表行中断：在内容之前

1 个答案: