css - 当 li 具有固定宽度时，google chrome 中的 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>为子项。

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

小提琴

例子：

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

CSS

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