下拉菜单超过容器宽度

我试图创建一个下拉菜单。问题是我的下拉菜单宽度超过容器宽度。据我所见，我没有利润或类似的东西。下拉菜单超过容器宽度

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>

任何想法？

来源

2015-10-03 telis

您的ul与类dropdown-menu有默认填充/缩进，将内容推出容器。

添加这个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>

来源

2015-10-03 10:16:42 Chris

谢谢，它的工作原理。但是默认的填充;我以为css只定义了这样的东西 – telis

_“但是默认的填充;我认为CSS只定义了这样的东西“ - 浏览器有一个默认的样式表，它们通常包含列表和/或列表项的默认边距/填充。如果你不喜欢这些默认值，你必须自己重写它们。您可能需要查看“CSS重置” - 这些样式表可用于覆盖那些默认值（浏览器之间可能会有所不同），其中大多数情况下这些值被认为是合理的默认值。 – CBroe

下面是代码

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>

来源

2015-10-03 10:27:44

下拉菜单超过容器宽度

回答

相关问题