CSS：ダッシュの前にliを使って要素を正しく整列する方法

Question

li要素を表示するには、ダッシュを使って簡単なulを作成しました。

Here is the example fiddle：

liが適切に整列されていません。

現在の李

-Loremイプサム嘆き、AMET consecteturのadipiscingのELIT座ります。 rhoncusのDUIのフストでPellentesqueののcursus、risus EUのfringilla blandit、アンティ悲しみmalesuadaマッサ、sedのrisus

blanditはLoremのにallignedする必要があります。ここで

は、私はあなたがダッシュのためにLiと絶対位置にパディングを使う（およびテキストインデントを削除）することができます

ul { 
    list-style-type: none; 
    padding: 0; 
    margin-bottom: 15px; 
} 

li { 
    padding-left: 10px; 
    padding-bottom: 0.1em; 
    text-indent: -.5em; 
} 

li:before { 
    content: "– "; 
    color: #333; 
} 

Answer 1

を使用していCSSコードです：

ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin-bottom: 15px; 
 
} 
 

 
li { 
 
    padding-left: 1.2em; /* amount of space for the dash */ 
 
    padding-bottom: 0.1em; 
 
    position: relative; 
 
} 
 

 
li:before { 
 
    content: "–"; 
 
    color: #333; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
</ul>

Answer 2

li padding-left = text-indentとする必要があります。例えば

：

{ 
    padding-left: .5em; 
    padding-bottom: 0.1em; 
    text-indent: -.5em; 
} 

またはuは

ul { 
 
    list-style-type: none; 
 
    padding:0; 
 
    margin-bottom: 15px; 
 
\t 
 
\t 
 
} 
 

 
    li { 
 
    padding-left: 10px; 
 
    padding-bottom: 0.1em; 
 
    text-indent: -10px; 
 
} 
 

 
    li:before { 
 
    content: "– "; 
 
    color: #333; 
 
}

<ul> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
</ul>

Answer 3

トリックを行いますposition: absoluteli::beforeに適用したいと10pxのそれらを作る

ul { 
 
    list-style-type: none; 
 
    padding-left: 10px; 
 
    margin-bottom: 15px; 
 
\t 
 
\t 
 
} 
 

 
    li { 
 
    padding-left: 10px; 
 
    
 
    padding-bottom: 0.1em; 
 
    /*text-indent: -.5em;*/ 
 
\t 
 
} 
 

 
    li:before { 
 
    content: "– "; 
 
    position: absolute; 
 
    left: 10px; 
 
    color: #333; 
 
    
 
}

<ul> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus, risus eu fringilla blandit, ante dolor malesuada massa, in rhoncus dui justo sed risus</li> 
 
</ul>