css - li の幅が固定されている場合の Google Chrome での li テキストの配置の問題

Question

私はliで構成されるdivを持っており、以下のようにliをリスト項目として表示するスタイルをいくつか持っています

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

問題は、テキストが幅を超えている場合、li の幅が固定されているため、2 行目に表示されることです。Chrome を除くすべてのブラウザで正常に動作します。2行目に表示されますが、2行目は箇条書き記号から始まっています。最初の行でテキストが始まった場所から始めたいです。

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;
}