Fatal编程技术网
  • html/
  • Html U:名单没有排好

Html U:名单没有排好

html css

Html U:名单没有排好,html,css,Html,Css,我开始把盒子和列表放在一起，看看它们是如何布局的，我发现了一些我没想到会发现的东西。我注意到包装ul名单的部门排得很奇怪。如果您发布下面的代码，您将看到列表中的项目符号没有排列在黑线的右侧。取而代之的是，图像位于线条前20个像素处。另外，当我在列表的div周围加上边框时，我认为边框也会围绕着子弹，但子弹却在边框之外。有人能解释一下吗？因此，这使得列表与其他对象对齐非常困难 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

我开始把盒子和列表放在一起，看看它们是如何布局的，我发现了一些我没想到会发现的东西。我注意到包装ul名单的部门排得很奇怪。如果您发布下面的代码，您将看到列表中的项目符号没有排列在黑线的右侧。取而代之的是，图像位于线条前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>


无标题文件
#包装纸{
宽度：700px；
}
*{
填充：0；
保证金：0；
}
.线路{
背景#B1B1B1；
浮动：左；
高度：340px；
宽度：1px；
}
#盒子{
浮动：左；
背景：#000；
宽度：200px；
高度：100px；
利润率：0 10px 0 10px；
}
#名单{
浮动：左；
边框：1px#FF0000实心；
}

    

  • 维尼亚姆酒店
    • 

  • 乌拉姆科实验室实习
    • 

  • 波罗奎斯夸姆岛
    • 

  • 劳工和多洛尔大酒店
    • 

  • 商品消费前的流动性
    • 

  • 这是一个充满活力的世界
    • 

  • 劳动时间的变化
    • 



UL列表中的项目符号实际上位于LI元素上，而不是UL。因为LI元素的左边填充和边距已使用*规则删除，所以项目符号的位置与它们相同。您必须通过在LI元素上添加一个左边距来进行补偿


这里有一篇比较老但很有用的文章：
Ah找到了答案。我刚刚将div改为列表样式：inside；它把子弹改在里面。抱歉，我想我已经回答了我自己的问题。仅供参考，将代码放入链接会使这些问题更容易回答。可怕的CSS重置让您感到困惑。（这里的要点是，当您放弃浏览器的默认设置时，您最好确保设置新的合理默认设置）。您知道您可以自行回答和接受，对吗？jcolebrand您是什么意思？我想我知道了，当我把重置取出时，它就工作了。我还注意到默认浏览器为ul而不是li添加了填充。如果我将ul padding设置为0，那么它将再次返回到不工作状态。谢谢大家让我明白这一点。