如何使項目符號列表與CSS中的文本對齊？

enter image description here 如何使項目符號列表與CSS中的文本對齊？

該圖像顯示了該問題。我希望項目符號列表與文本對齊，而不是縮進。

這必須在CSS我想進行修改，因爲來源：

  <p>This is a test :)</p> 

<ul> 

<li>Test1</li> 

<li>Test2</li> 

<li>Test3</li> 

<li>Test4</li> 

</ul> 

<p><strong>Bla bla</strong></p> 

<p><strong>Dette er en test</strong></p> 

<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p> 

<p><strong>Dette er en test</strong></p> 

<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p> 
     </div>

所以，我怎麼能在這個牛市列表左側，取出填充/保證金？我試過margin: 0; padding: 0;沒有發揮出來

來源

2011-09-22 Karem

應用填充左：0和更改列表樣式位置內

ul { 
padding-left:0; 
} 
ul li { 
list-style-position:inside 
}

實例鏈接http://jsfiddle.net/vF5HF/

來源

2011-09-22 14:10:48 NicolaPasqui

請記住'list-style-position：inside'將使子彈基本上在文本中，所以如果你的文本包裹子彈不會將文本分開。如果你問我，這看起來很糟糕。 – Gavin

他要求一個沒有創意的文本對齊列表......它看起來很糟糕，但這就是他要找的;） – NicolaPasqui

ul { 
    margin-left: 0; 
    padding-left: 0; 
} 
li { 
    margin-left: 1em; 
}

來源

2011-09-22 14:06:55

這個答案通常會更好因爲它將文本保留在跨越多行對齊的列表項中。 –

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Bullet alignment</title> 
    <style type="text/css"> 
     body { font-size: 14pt; margin: 100px; background-color: #f2f2f2; } 
     ul { margin-left: 0; padding-left: 2em; list-style-type: none; } 
     li:before { 
      content: "\2713"; 
      text-align: left; 
      display: inline-block; 
      padding: 0; 
      margin: 0 0 0 -2em; 
      width: 2em; 
     } 
    </style> 
</head> 
<body> 
<p>Bullet alignment &#x1F608;</p> 
<ul> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
</ul> 
<p>That’s all Folks</p> 
</body>

來源

2014-01-24 17:38:32 nico

這是這裏最好的答案。我所做的唯一改變是使用內容：「\ 2022」與font-weight：bold，因爲OP要求的項目符號。 –

如何使項目符號列表與CSS中的文本對齊？

回答

相關問題