使用css左对齐项目符号点

Question

我试图用html和css完全左对齐项目符号点，但是当字体大小更改时，左对齐也会更改。

list-style-position应该是outside。我尝试了inside，然后用text-indent补偿，但看起来更糟糕。

这是迄今为止最好的，但它仍然看起来不太好，如果我只是在ul元素上应用样式，它会更适合我的代码结构。

ul 
{ 
    list-style-type: disc; 
    list-style-position: outside; 
    padding: 0.5em 0 0 3em; 
} 

ul.two li 
{ 
    font-size: 20px; 
} 

ul.three li 
{ 
    font-size: 35px; 
} 

http://jsfiddle.net/d9VNk/776/

Answer 1

你也可以使用一个伪元素，并使用像素，而不是EM：

ul { 
 
    padding: 0.5em 0 0 20px; 
 
    margin: 0 2em; 
 
    background:linear-gradient(to right, transparent 20px, lightgray 20px); 
 
} 
 
li { 
 
    list-style-type: none; 
 
    padding-left: 20px; 
 
} 
 
li:before { 
 
    content: ''; 
 
    float: left; 
 
    display: list-item; 
 
    list-style-type: disc; 
 
    list-style-position: inside; 
 
    width: 20px; 
 
    margin-left: -20px; 
 
} 
 
ul.two li { 
 
    font-size: 20px; 
 
} 
 
ul.three li { 
 
    font-size: 35px; 
 
} 
 
ul.hudge li { 
 
    font-size: 60px; 
 
}

<ul> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
</ul> 
 

 
<ul class="two"> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
</ul> 
 

 
<ul class="three"> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
</ul><ul class="hudge"> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
</ul>

http://jsfiddle.net/d9VNk/778/

Answer 2

您可以用TECHN实现它ique，通过删除子弹并在内容之前使用点。看到代码，例如：

ul 
 
{ 
 
    list-style-type: disc; 
 
    list-style-position: outside; 
 
    padding: 0.5em 0 0 50px; 
 
} 
 

 
ul.two li 
 
{ 
 
    font-size: 60px; 
 
} 
 

 
ul.three li 
 
{ 
 
    font-size: 35px; 
 
} 
 

 
ul li{ 
 
     list-style: none; 
 
     margin-left: 9px; 
 
     text-indent: -9px; 
 
} 
 

 
ul li:before { 
 
    content: "· "; 
 
}

<ul> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
</ul> 
 

 
<ul class="two"> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
</ul> 
 

 
<ul class="three"> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
    <li>saoi yhsahkjdhasjdg jhgdas hdgash gdashg dzxhjb cnxz cznxb cnzxb cznxbc xznbc xznb cznxbc nbzx czbx ncbzx cnbzx ncbzx ncbzxc zx czx czc x cxz</li> 
 
</ul>

我希望它会带你在某个方向。