下拉菜單超過容器寬度

我試圖創建一個下拉菜單。問題是我的下拉菜單寬度超過容器寬度。據我所見，我沒有利潤或類似的東西。下拉菜單超過容器寬度

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

下拉菜單超過容器寬度

回答

相關問題