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

尽管li.textmenu的宽度为：140px，padding：5px，div.textmenu的宽度为150px，但我迄今为止所做的一个列表项目有一个很大的左边距，并且超出了div的右边缘一个好的30px。有人能解释为什么吗？为什么这个ul超过了div的大小？

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>

来源

2010-07-17 kim holder

尝试使用类似萤火虫的工具检查页面，该工具可显示每个框的大小和边距。也许某个盒子比你想象的要大，或者文本溢出盒子（检查CSS“溢出”）。 – zvone 2010-07-17 02:22:54

你加一个zip /单重置你的CSS文件的顶部？

* { margin:0; padding:0; }

（把它放在CSS的最顶端以覆盖浏览器默认边距/填充）。

最有可能的ul被给予默认的填充/余量，所以这是为了反制它。

来源

2010-07-17 00:31:37

uni-reset？对不起，这是我的头... – 2010-07-17 00:33:02

请参阅说明。 – 2010-07-17 00:33:46

哦。对。只需一秒钟。 – 2010-07-17 00:35:53

确保ul不具有其自身的填充和利润，通过与padding:0;margin:0;

来源

2010-07-17 00:34:53

这样做可以节省我设置边距和填充所有内容的需求，但是我已经将一般重置置于* {padding：0;边距：0;}在CSS的开始。 – 2010-07-17 01:25:07

@briligg，请参阅http://meyerweb.com/eric/tools/css/reset/以获得一般性好的重置（*不仅仅是边距/填充..*） – 2010-07-17 01:58:52

上行重置它有margin和padding设置由浏览器。您将要删除此：

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

只有填充影响的宽度，但你可能会想摘下裕太。

来源

2010-07-17 00:39:12 user11977

它就像斯里登说的那样。有全部 html元素预设样式属性。

我建议你通过埃里克迈耶使用复位CSS：http://meyerweb.com/eric/tools/css/reset/

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

来源

2010-07-17 00:47:27 ChrisBenyamin

该版本进入了很多东西，我不认为我需要这个复杂的网站......但它是一个有趣的资源。我要去查找更多'CSS重置'的东西。 – 2010-07-17 00:57:34

确保您已计算出您想要在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的填充像素来修复。

来源

2011-11-16 10:24:51

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

回答

相关问题