Saya telah menyiapkan situs yang sangat mendasar dengan div #container yang mencakup #navbar dan #content. Namun, saat saya memperbesar atau memperkecil, #navbar terdistorsi, jika saya memperbesar, tautan akan terdorong ke bawah dan bukannya sejajar. Jika saya memperkecil, terlalu banyak padding yang ditambahkan di antara tautan. Bagaimana cara menghentikan ini?
HTML:
<div id="navbar">
<ul>
<li><a href="/idindex.html">Home</a></li>
<li><a href="/idtop.html">Top</a></li>
<li><strong><a href="/idfree.html">FREE</a></strong></li>
<li><a href="/idphoto.html">Photo</a></li>
<li><a href="/idabout.html">About</a></li>
<li><a href="/idcontact.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<p>Some sample text.<p>
</div>
</div>
CSS:
#container {
position: static;
background-color: #00bbee;
margin-left: 20%;
margin-right: 20%;
margin-top: 7%;
margin-bottom: 15%;
border: 2px solid red;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
}
#navbar li a{
text-decoration: none;
color: #11ff11;
margin: 3%;
border: 1px dotted orange;
padding-left: 4px;
}
#navbar li a:hover {
background-color: white;
color: green;
}
#navbar {
background-color: #eeeeee;
padding-top: 2px;
padding-bottom: 5px;
border: 1px solid yellow;
}
Bagaimana cara menghentikannya agar tidak terdistorsi?
Selain itu, saya masih cukup baru dalam CSS, saya diajari menggunakan %, bukan px. Apakah itu benar? Juga hal lain yang perlu Anda tunjukkan, harap beri tahu saya.
Terima kasih sebelumnya!
