html - 下拉菜单超出容器宽度

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>

有什么想法吗？

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>