U：列表沒有排隊

我開始把盒子和列表放在一起，看看他們如何佈置，我發現了一些我沒想到會發現的東西。我注意到包裹ul列表的div非常奇怪地排隊。如果您在下面發佈代碼，則會看到列表的項目符號不符合黑線的右側。相反，坐在線前20個像素。另外，當我在列表中添加邊框時，我認爲邊框也會包裹子彈，但是子彈不在邊框內。有人可以解釋這個嗎？所以這使得將列表與其他對象排列起來非常困難。U：列表沒有排隊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
    #wrapper{ 
     width:700px; 
    } 
    *{ 
     padding: 0; 
     margin: 0; 
    } 

    .line { 
    background: #B1B1B1; 
     float: left; 
     height: 340px; 
     width: 1px; 
    } 

    #box{ 
     float: left; 
     background:#000; 
     width: 200px; 
     height: 100px; 
     margin: 0 10px 0 10px; 
    } 

    #list{ 
     float: left; 
     border:1px #FF0000 solid; 
    } 


</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="box"></div> 
    <div class="line"></div> 
    <div id="list"> 
     <ul> 
       <li>enim ad minima veniam, quis nostrum</li> 
       <li>exercitation ullamco laboris</li> 
       <li>eque porro quisquam est</li> 
       <li>labore et dolore magnam aliquam</li> 
       <li>aliquid ex ea commodi consequatur</li> 
       <li>illum qui dolorem eum fugiat quo voluptas</li> 
       <li>modi tempora incidunt ut labore</li> 
      </ul> 
    </div> 
</div> 
</body> 
</html>

來源

2011-06-19 Chapsterj

啊計算出來。我只是改變了div有list-style：inside;它會將子彈更改爲內部。對不起，我想我回答了我自己的問題。 – Chapsterj

fyi，把你的代碼放到http://jsfiddle.net/鏈接中，這樣的問題更容易回答 – Jeff

你可怕的CSS重置讓你感到困惑。 [CSS重置不好]（http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/）（這裏的意思是，你最好確保你設置新的合理的默認值你放棄了那些瀏覽器）。 – You

UL列表的項目符號實際上在LI元素而不是UL上。由於使用*規則刪除了LI元素的左邊填充和邊距，所以子彈就像他們一樣坐着。您必須補償，通過在您的LI元素上添加左邊距。

看到這裏的一個較舊的，但有用的文章：http://meyerweb.com/eric/css/list-indent.html

來源

2011-06-19 21:44:03 Digbyswift

啊我看到，當我把我的重置了它的作品。我還注意到默認瀏覽器添加了填充到ul而不是li。如果我設置了ul填充：0，那麼它又回到不再工作。感謝所有讓我理解這一點。 – Chapsterj

U：列表沒有排隊

回答

相關問題