Question

我开始把盒子和列表放在一起，看看它们是如何布局的，我发现了一些我没想到的东西。我注意到包裹ul列表的div非常奇怪。如果您发布下面的代码，您将看到列表的项目符号不在黑线的右侧。相反，它们位于线前20像素。此外，当我在列表中放置div的边框时，我认为边框也会缠绕子弹，但是子弹在边界之外。有人可以解释一下吗？因此，这使得将列表与其他对象排列非常困难。

<!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>

Answer 1

UL列表的子弹实际上是LI元素而不是UL。因为左边的填充物和LI元素的边缘已被删除*规则，子弹就像它们一样。您必须通过在LI元素上添加左边距来补偿。

请参阅此处查看较旧但有用的文章：http://meyerweb.com/eric/css/list-indent.html

你：排队不排队

1 个答案: