导航栏对齐最小宽度CSS

你好我喜欢一些有助于让我的导航栏正确缩放（例如Min-width 800px ???）。此外，我不知道如果我的电话号码设置正确，但编号喜欢在电话号码和导航栏中的链接之间有一些空间。这是我第一次尝试这样的事情，所以任何帮助将不胜感激，谢谢。导航栏对齐最小宽度CSS

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>

来源

2013-12-09 Nate8384

你能具体而言，导航怎么样子？链接排列在中心还是左边？需要多少间距？在导航块上提供图像非常令人满意。 – Akhil

这里是一个链接到图片的导航条看起来像。我已经得到了这个。 http://www.theatermonster.com/exchange/navbar.png – Nate8384

还有一个标题图片吧？该放置在哪里？ – Akhil

更正代码，请检查您满意的需要。

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>

来源

2013-12-13 09:17:05 Akhil

导航栏对齐最小宽度CSS

回答

相关问题