ロゴが左側に、右側に水平ナビゲーションバーがある私のウェブページにヘッダーを作りたいと思っています。左側のロゴと右側のナビゲーションのヘッダーを作成するにはどうすればいいですか?
問題は、ブラウザウィンドウを縮小すると、ナビゲーションバーがヘッダーコンテナの境界より下になり、ページの構造に違反するという問題です。このよう
:
は、任意の解決策はありますか?親コンテナのHeaderを子コンテナの高さに合わせることしか考えられませんが、実装する方法はわかりません。あるいは、私は何とかメディアのクエリを使用する必要がありますか?
私は次のコードを書いています。
header {
height: 100px;
background-color: gray;
background-image: url('img/background.gif');
}
#logo {
float: left;
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<header>
<img id="logo" src="images/logo.png">
<nav>
<ul>
<li><a href="#home">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#services">Services</a>
</li>
<li><a href="#gallery">Gallery</a>
</li>
<li><a href="#blog">Blog</a>
</li>
<li><a href="#contacts">Contacts</a>
</li>
</ul>
</nav>
</header>
私は非常にあなたがしたいどのような影響を与えるのか理解していません。縮小して、ナビゲーションバーが新しい行に移動しない場合は、ヘッダーがオーバーレイされますが、これはうまくありません。ウィンドウが収縮しているときに、これをどのように正確に処理したいのですか? –