Question

虽然li.textmenu的宽度为：140px，padding：5px，div.textmenu的宽度为：150px，但我到目前为止所创建的一个列表项左边距较大，并且超出了div的右边缘好30便士。有人能解释一下原因吗？

http://www.briligg.com/frailty.html

的CSS：

div.textmenu {
  background-color: #3b3b3b;
  float: left;
  width: 150px;
  margin: 30px 10px 0 30px;
}

li.textmenu {
  background-color: #4a4a4a;
  margin: 0;
  padding: 5px;
  border: none;
  width: 140px;
  list-style: none;
  text-align: right;
}

HTML：

<div class="textmenu"> 
  <ul> 
    <li class="textmenu"><a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a></li> 
  </ul> 
</div>

Answer 1

您是否在您的css文件顶部添加了zip / uni重置？

* { margin:0; padding:0; }

（完全按照CSS顶部的方式覆盖浏览器默认边距/填充）。

最有可能ul被赋予默认填充/边距，所以这是反作用。

Answer 2

通过ul

重置padding:0;margin:0;，确保{{1}}没有自己的填充和边距

Answer 3

ul有一个边距，填充由浏览器设置。你想要删除它：

div.textmenu ul {margin:0;padding:0;}

只有填充会影响宽度，但您可能也想要取消边距。

Answer 4

像pmeridan说的那样。所有 html元素都有预设样式属性。

我建议你使用Eric Meyer的重置css：http://meyerweb.com/eric/tools/css/reset/

您可以将其包含在文档的顶部。之后，您可以更好地控制所需的样式。

Answer 5

确保你已经计算出想要在Div中修复的Li的确切宽度和高度，确保DIV中有足够的空间。

div.textmenu {
    background-color: #3b3b3b;
    float: left;
    width: 150px;
    margin: 30px 10px 0 30px;
    }
    li.textmenu {
    background-color: #4a4a4a;
    margin: 0;
    padding: 5px;
    border: none;
    width: 140px;
    list-style: none;
    text-align: right;
    }

由于您制作了填充：5px，由Li的2xwidth +高度计算，Li应超过Div框的150px宽度。您可以通过减少LI的填充像素来修复。

为什么这个ul超过了div的大小？

5 个答案: