停止文字環繞css genareated內容？

Question

我在列表中使用CSS生成的內容。當列表文本足夠長時，它會向左移動太遠。我希望文本在包裝時保持內聯。

<ul> 
    <li>List item text</li> 
    <li>List item with longer text</li> 
</ul> 
li { 
    list-style: none; 
    margin-bottom: 20px; 
} 
li:before { 
    content: "+"; 
    color: red; 
    margin-right: 10px; 
} 
ul { 
    width: 120px; 
} 

http://codepen.io/anon/pen/uFchG

Answer 1

你可以稍微改變你的CSS所以，這是一個position:aboluste;和li（父）是position:relative;然後稍稍移動它。

CodePen Example

li { 
    list-style: none; 
    margin-bottom: 20px; 
    position:relative; 
} 

li:before { 
    content: "+"; 
    position:absolute; 
    color: red; 
    left:-15px; 
} 

ul { 
    width: 120px; 
} 

或者，你可以給一個li和margin-left的:afterleft:-npx;所以這一切都仍然是li元素的邊界之內。

Answer 2

在UL補充一點：

text-align:center; 

Answer 3

嘗試添加這兩行

li { 
    list-style: none; 
    margin-bottom: 20px; 
    padding-left: 1em; 
    text-indent: -1em; 
}