使響應菜單的寬度與上面的圖片/標題寬度相同

我有一張帶有圖片的標題，並且我希望在下方有一個與寬度相匹配的導航菜單，因爲我縮小了窗口。目前，我的標題和圖片比例很好，但我的菜單按鈕沒有。在較早的時候，窗口變得太窄，菜單按鈕分開放置。我如何使菜單與圖像寬度匹配？下面是相關的代碼和圖像來顯示問題。使響應菜單的寬度與上面的圖片/標題寬度相同

http://imgur.com/a/go2Of

HTML的標頭和菜單：

<div id="wrapper1"> 
     <div id="header"> 
      <div id="logo"> 
        <img src="Images/logolow.jpeg"/> 
       </picture> 
      </div> 
      <div id="login"> 
        <fieldset> 
        <Legend>Login</Legend> 
        Username <input type="text" name="username"/> 
        Password <input type="password" name="password"/> 
        <input type="submit" value="Login"> 
        <div id="register"> 
         <a href="Assignment1-Register.html">Not a member? Click here to register!</a> 
        </div> 
        </fieldset>  
      </div> 
     </div> 
     <div id="sidebar"> 
     <a href=""> Home</a><a href=""> Search</a><a href=""> All Profs</a><a href=""> Submit</a><a href="#contact"> Contact</a> 
     </div> 
</div>

CSS：

#wrapper1{ 
    width: 85%; 
    margin-left: auto; 
    margin-right: auto; 
    font-family: Helvetica, Verdana, Arial; 
} 

#header { 
    width: 100%; 
    position: relative; 
} 

#logo { 
    height: 450px; 
    width: 100%; 
} 

#logo img { 
    height: 100%; 
    width: 100%; 
} 

#login { 
    bottom: 0px; 
    right: 0px; 
    width: 15%; 
    color: white; 
    position: absolute; 
} 

#login a { 
    color: inherit 
} 

#register { 
    font-size: 14px; 
} 

#login fieldset { 
    display: block; 
    border: 2px solid white; 
} 

#sidebar { 
    margin: 14px; 
    width: 100%; 
} 

#sidebar a { 
    height: 40px; 
    padding-top: 10px; 
    padding-left: 6.55%; 
    padding-right: 6.55%; 
    text-align: center; 
    font-size: 12pt; 
    font-weight: bold; 
    background-color: black; 
    color: white; 
    border-style: outset; 
    border-width: 1px; 
    text-decoration: none; 
}

來源

2016-10-07 Nicholas Hassan

您是否嘗試過在鏈接上使用百分比寬度？附：你的'＃頭文件'，'＃logo'和'＃sidebar' DIV不需要'width：100％;'它們是塊級元素，它們已經佔用了它們父元素寬度的100％。 – hungerstar

@hungerstar我該怎麼做呢？如果這就是你的意思，我已經爲#sidebar a {}選擇了一個選擇器。我會改變爲一個百分比？ –

也就是說：'#sidebar a {width：25％; }'。另請參閱下面的答案。 – hungerstar

這裏是一個溶液。

在鏈接上使用的百分比寬度合計爲100％。確保而不是在這些鏈接上使用display: inline-block;，因爲額外的空白被添加到內聯元素中，並且會使其總大小超過父元素的100％。

header img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
nav { 
 
    margin-left: -5px; 
 
    margin-right: -5px; 
 
} 
 
nav a { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    float: left; 
 
    width: calc(25% - 10px); 
 
    margin: 0 5px; 
 
    padding: 0.5rem 1rem; 
 
    color: white; 
 
    text-align: center; 
 
    background-color: #999; 
 
    
 
}

<header> 
 

 
    <img src="http://placehold.it/1600x400?text=hero-image"> 
 
    
 
    <nav> 
 
    <a href="#">One</a> 
 
    <a href="#">Two</a> 
 
    <a href="#">Three</a> 
 
    <a href="#">Four</a> 
 
    </nav> 
 
    
 
</header>

對於較大的屏幕時，您將需要：

較大的圖像，或
較大的圖像和/或切換到max-width: 100%;width: 100%;（小心，如果圖像被拉伸超過它的像素的原始大小），或者
抑制第e導航鏈接。

來源

2016-10-07 17:59:16 hungerstar

這很好，謝謝！ –

使響應菜單的寬度與上面的圖片/標題寬度相同

回答

相關問題