在内容前缩进列表换行符

Question

我有一个列表，其中一些项目很长，因此在小型设备上导致换行。每个列表项前面都需要有>符号。我不想使用图像(例如list-style-image)。因此，我现在使用: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%;
}

参见提琴:http://jsfiddle.net/SGz75/1/

Answer 2

你真正需要做的是使用'absolute' &"相对"
实际上，我认为应该避免操纵列表HTML

的例子:

<ul>
  <li>some text 1</li>
  <li>some text that breaks a line 2</li>
  <li>some text 3</li>
  <li>some text 4</li>
  <li>some text 5</li>
</ul>
<style>
ul {list-style: none; padding: 0; max-width: 100px;}
li {position: relative; padding: 0 0 0 20px;}
li:before {content: '//'; position: absolute; top: 0; left: 0;}
</style>