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>

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>

下拉菜单超出容器宽度

2 个答案: