0

私はhtmlとcssが初めてです。タイトルとナビゲーション バーを同じ高さにしましたが、ブラウザ ウィンドウを小さくすると (リキッド)、タイトルとナビゲーション バーが衝突します。どうすればこれを修正できますか?

これは、タイトルとナビゲーションの CSS コードです。バー：

/*title*/
#logo{
width: 35%;
margin-top: 5px;
font-family: georgia;
display: inline-block;
}

/* nav. bar */
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
/* unorded list */
#nav ul{}

#nav ul li{
display: inline-block;
height: 62px;
}
/* text*/
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}

そして、これはhtmlコードです：

<div id="logo">
    <h1><a href="../html/index.html" id="logoLink">Baby kleding online</a></h1>
</div>
<div id="nav">
    <ul>
        <li><a href="../html/index.html"id="homenav" >Home</a></li>
        <li><a href="../html/kleding.html"id="kledingnav" >Kleding</a></li>
        <li><a href="../html/bestel.html" id="bestelnav">Bestellen</a></li>
        <li><a href="../html/contact.html"id="contactnav">Contact</a></li>
        <li><a href="../html/vragen.html" id="vragennav">Vragen</a></li>


    </ul>
</div>

前もって感謝します。

4

1 に答える 1

0

私が提案するのは、ロゴに絶対的な位置を与え、ナビゲーションをその上に浮かせ、ロゴの幅と同じ左余白にすることです。

ここに例：

http://codepen.io/anon/pen/uvAaJ

探している動作で質問を拡張できる場合は、それが役立ちます...必要に応じてこの状況を処理する方法が非常に多いため(absolute + margin、メディアクエリ、box-sizing:border-box ...)。

于 2013-10-16T08:16:19.753 に答える