CSS中的「ul」元素和「p」元素之間的匹配縮進

正如您在代碼中看到的，我正在嘗試將項目符號與文本對齊，而不是文本與文本對齊。CSS中的「ul」元素和「p」元素之間的匹配縮進

<html> 
    <head> 
     <style type="text/css"> 
      body 
       { 
       width: 6.5in; 
       padding-left: 1in; 
       padding-right: 1in; 
       } 
      .indent 
       { 
       padding-left: 50px; 
       } 
     </style> 
    <head> 

    <body> 
     <p class="indent">As You can see, the indents match</p> 
     <ul class="indent"> 
      <li>Unfortunately, this only works for for the text, not the bullets</li> 
      <li>Of course, this isn't necessarily bad since this may be what somebody wants out of their indents and it is the default behavior</li> 
      <li>Obviously, this isn't what I want, or else I wouldn't be posting to SO</li> 
      <li>You've probably already figured this out by now, but I'll say it anyway: I'm trying to get the bullet of the unordered list element to match the alignment of the paragraph, not just the text</li> 
      <li>If it still doesn't make sense, copy &amp; paste this code, view it in your favorite browser and then compare it to how the indents work in LibreOffice (I'm pretty sure MS Word works the same way as LO with indents & bullets; Google Docs works more like the default behavior)</li> 
     </ul> 
    </body> 
</html>

當然，人們可以總是「眼球」，或在視覺上估計，它通過創建「UL」元件一個單獨的類和改變「填充左」的值，然後比較中的結果5個主要的瀏覽器，但我想找到一種方法來使用比人眼更精確的語言機制。

來源

2011-08-26 Stisfa

如果'list-style-position'是'inside'，則不必做任何事情。有了'list-style-position：outside'，雖然，我不確定... – BoltClock

嗯，有趣的建議。我在JSFiddle上回顧了freezethrower的解決方案（下面），它主要滿足所期望的意圖，只是它很醜陋，至少在列表是多行的時候。只是我的意見，沒有更多;我並不是不信任你們兩個，因爲解決方案肯定會起作用，我只是一個挑剔的人^^; – Stisfa

這個差別通常是15px。

看看這個JS小提琴： http://jsfiddle.net/HRN9J/1/

我建議做一個CSS Reset，這將使你建立在此基礎之上，而無需在不同的瀏覽器會影響您的代碼。

來源

2011-08-26 00:50:53

只是想給你的答案增加幾個觀點：不應該使用像素（'px'），因爲用戶在其顯示器上有不同的像素數（不是你的錯，我的首先使用它）。我的目標是使這臺打印機更友好，所以我使用了Points（'pt'）來達到這個目的。在我的實驗中，'pt'關係相當於'15pt'。這裏有一個[參考]（http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/），我在'font-size'上找到了，討論'em'，'px'，'pt'和'％' – Stisfa

還有一個關於爲什麼應該使用px的參考，如果需要的話，我可以找到。 –

Here是可能的解決方案之一 - 指定列表樣式位置。

來源

2011-08-26 00:54:12 freezethrower

CSS中的「ul」元素和「p」元素之間的匹配縮進

回答

相關問題