導航欄對齊最小寬度CSS
[英]Nav Bar Align Min-Width CSS
問題描述
您好，我想獲得一些幫助，以使我的導航欄正確縮放（例如，最小寬度800px ???）。 另外我不確定我是否正確設置了電話號碼div，但id喜歡在電話號碼和導航欄中的鏈接之間留一些空間。 這是我第一次嘗試這樣的事情，因此，感謝您的任何幫助。
CSS
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
#navbar {
background:#212221 repeat-x;
height:25px;
color:#FFF;
padding:px 0px 0px 20px;
}
#nav {
background:#212221 repeat-x;
width: auto;
float: left;
font-size:14px;
font-family:GeosansLight;
margin: 0 0 3em 0px;
margin-left:500px;
padding: 0;
list-style: none;
min-width:700px;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 3px 10px;
text-decoration: none;
color: #fff;
}
#nav li a:hover {
text-decoration: underline;
color:#FFF;}
#number {
background:#212221 repeat-x;
width: auto;
float:left;
font-size:16px;
font-family:GeosansLight;
margin: 0 0 3em 0px;
margin-top:3px;
margin-left:200px;
padding:0;
list-style: none;
}
#number li {
float: left;
}
#number a {
display: block;
padding: 0px 10px;
text-decoration: none;
color: #fff;
}
#header {
background:#FFF repeat-x;
height:80px;
color:#FFF;
padding:0px 0px 0px 0px;
}
</style>
HTML
<body>
<div id="navbar">
<ul id="nav">
<li><a href="/index.html">HOME</a></li>
<li><a href="/about.html">ABOUT US</a></li>
<li><a href="/gallery.html">GALLERY</a></li>
<li><a href="/faq.html">FAQs</a></li>
<li><a href="/contact.html">CONTACT</a></li>
</ul>
<div id="number">
<a>951-226-5620</a>
</div>
<div class="header">
<img src="images/kingstudlogo.png"/>
</div>
</body>
1 個解決方案
解決方案1
0 2013-12-13 09:17:05
更正了代碼，請檢查它是否滿足您的需求。
CSS
html, body {
margin: 0;
padding: 0;
}
#navbar {
background: none repeat-x scroll 0 0 #212221;
color: #FFFFFF;
height: 25px;
}
#nav {
background: none repeat-x scroll 0 0 #212221;
float: left;
font-family: GeosansLight;
font-size: 14px;
list-style: none outside none;
margin: 0 0 0 319px;
min-width: 481px;
padding: 0;
width: auto;
}
#nav li {
float: left;
}
#nav li a {
color: #FFFFFF;
display: block;
padding: 3px 10px;
text-decoration: none;
}
#nav li a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#number {
background: none repeat-x scroll 0 0 #212221;
float: left;
font-family: GeosansLight;
font-size: 16px;
list-style: none outside none;
margin: 3px 0 0 200px;
padding: 0;
width: auto;
}
#number li {
float: left;
}
#number a {
color: #FFFFFF;
display: block;
padding: 0 10px;
text-decoration: none;
}
.header {
background: none repeat-x scroll 0 0 #FFFFFF;
color: #FFFFFF;
height: 80px;
padding: 0 0 0 330px;
}
HTML
<div id="navbar">
<ul id="nav">
<li><a href="/index.html">HOME</a></li>
<li><a href="/about.html">ABOUT US</a></li>
<li><a href="/gallery.html">GALLERY</a></li>
<li><a href="/faq.html">FAQs</a></li>
<li><a href="/contact.html">CONTACT</a></li>
</ul>
<div id="number">
<a>951-226-5620</a>
</div>
</div>
<div class="header">
<img src="images/kingstudlogo.png"/>
</div>
Css min-width沒有水平滾動條顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.