html - 缩进列表换行符为 :before content

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>

即 > 和文本可以在单独的 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%;
}

参见 fiddle :http://jsfiddle.net/SGz75/1/