下拉菜单超出容器宽度

Question

我正在尝试创建一个下拉菜单。问题在于我的下拉菜单宽度超过了容器宽度。据我所见，我没有任何边距或类似的东西。

CSS

#wrapper {
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 100%;
    font-family: Roboto;
    float: left;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 340px;
    text-align: center;
    }

HTML

<div id="wrapper">
    <div id="wrapper1">
        <ul class="dropdown-menu"> 
            <li>A</li>       
            <li>B</li>
            <li>C</li>
        </ul> 
    </div>
</div>

有什么想法吗？

- telis

Answer 1

您的具有 dropdown-menu 类的 ul 元素具有默认的填充/缩进，这会使内容超出容器。

请将以下 CSS 规则添加到您的 .dropdown-menu 中：

padding: 0;

尝试在代码片段中使用它：

#wrapper {
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 100%;
    font-family: Roboto;
    float: left;
    padding: 0;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 340px;
    text-align: center;
    }

<div id="wrapper">
    <div id="wrapper1">
        <ul class="dropdown-menu"> 
            <li>A</li>       
            <li>B</li>
            <li>C</li>
        </ul> 
    </div>
</div>

- Kristijan Iliev

---

谢谢，它有效。但默认填充；我以为CSS只定义这样的东西。 - telis

“但是默认填充；我以为CSS只定义了这些东西” - 浏览器有一个默认样式表，它通常包括列表和/或列表项的默认边距/填充。如果您不喜欢这些默认值，则必须自行覆盖它们。您可能需要研究“CSS重置” - 这些是您可以使用的样式表，用于使用大多数情况下被认为是明智的默认值覆盖那些默认值（在浏览器之间可能有所不同） 。 - CBroe

Answer 2

这里是代码

CSS

#wrapper {
    position: relative;
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 980px;
    font-family: Roboto;
    float: left;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 307px;
    text-align: center;
    }

HTML

<div id="wrapper">
<div id="wrapper1">
    <ul class="dropdown-menu"  id="dropdown-menu"> 
        <li>A</li>       
        <li>B</li>
        <li>C</li>
    </ul> 
</div>
</div>

- Shuvo Shuvo