応答可能なメニューを上記の画像/ヘッダーと同じ幅にする

Question

画像が入ったヘッダーがあります。ウィンドウの幅を狭くするとその幅の下にナビゲーションメニューが表示されます。現在のところ、私のヘッダーと画像のスケールは問題ありませんが、メニューボタンはありません。初期の段階では、ウィンドウが狭くなり、メニューボタンが別の行に移動します。メニューを画像の幅に合わせるにはどうすればいいですか？以下に関連するコードとその問題を示す画像があります。ヘッダやメニューの

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; 
} 

Answer 1

ここではソリューションです。

リンクのパーセンテージ幅を100％にしてください。 がでないことを確認してください。display: inline-block;を追加の空白がインライン要素に追加され、その合計サイズが親要素の100％を超えてしまうため、これらのリンクでdisplay: inline-block;を使用してください。

• 大きな画像、または
• 拡大画像を、および/または画像ならば、（width: 100%;に慎重max-width: 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>

  大画面のためには必要がありますそのネイティブサイズを超えてピクセル化されます）、または

• thの最大幅を制限します。 eナビゲーションリンク。