css - 当 li 具有固定宽度时，谷歌浏览器中的 li 文本对齐问题

Question

我有一个由 li 组成的 div，我有一些样式可以将 li 显示为列表项，如下所示

position: relative;
left: 20px;
display: list-item;
max-width: 160px;
font-size: 12px;

问题是 li 的宽度是固定的，如果文本大于宽度，那么它会显示在第二行。它在除 chrome 之外的所有浏览器中都可以正常工作。它显示在第二行，但第二行是从元素符号开始的，我希望它从第一行文本开始的地方开始。

Example:
    it is as below
     . xxxxxxxxx
     . yyyyyyyyy
     yyyyy

but i want as below
     . xxxxxxxxx
     . yyyyyyyyy
       yyyyy   

Answer 1

如果你想显示列表项 - 正确和最语义化的方法是使用

有序/无序列表 <ul>/<ol>与列表项 <li>作为 child 。

这也将解决您面临的问题。

FIDDLE

例子:

<ul>
    <li>lots of text</li>
    <li>lots of text</li>
</ul> 

CSS

li
{
    position: relative;
    left: 20px;
    max-width: 160px;
    font-size: 12px;
}