Слева по левому краю с помощью 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

вы также можете использовать псевдо-элемент и использовать пиксели вместо эм:

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

Вы можете достичь его с технич 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>

Я надеюсь, что он будет считать вас в каком-то направлении.