0
有人可以幫我弄清楚如何均勻地將我的ul放置在導航中嗎？我基本上想要在左右兩邊填充大約5px，然後我希望文本在整個剩餘空間中均勻分佈。均勻空間水平導航ul
body {
background: #ffffff;
text-align: center;
font-family: helvetica, arial, sans-serif;
line-height: 25px;
margin-top: 0px;
}
h1 {
font-size: 34px;
line-height: 24px;
color: #007a3d;
}
a:link {
color: #007a3d;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #007a3d;
}
#container {
width: 960px;
margin: auto;
text-align: center;
}
#container #godbar {
width: 960px;
height: 32px;
margin: auto;
position: relative;
background: url(images/godbar_bg.jpg) repeat-x;
border-left: 1px solid #dbc25e;
border-bottom: 1px solid #dbc25e;
border-right: 1px solid #dbc25e;
}
#container #godbar #godbarIcons {
width: 100%;
height: 32px;
float: right;
text-align: right;
margin-top: 5px;
margin-right: 5px;
}
#container #godbar #godbarIcons ul {
display: inline;
}
#container #godbar #godbarIcons li {
display: inline;
padding-right:13px;
}
<!--END GODBAR-->
#container #header {
width: 960px;
height: 150px;
}
#container #header #logo h1{
width: 233px;
height: 94px;
clear: both;
display: block;
background: red;
margin: 0 0 0 15px;
background: url(images/logo.jpg) no-repeat;
text-indent: -9999px;
}
#container #header #logo h1 a {
display: block;
width: 233px;
height: 94px;
}
#container ul#nav {
height: 44px;
text-align: center;
margin: 5px 0px 0px 0px;
background: url(images/navigation_bg.jpg) repeat-x;
list-style: none;
display: block;
}
#container ul#nav a:hover {
text-decoration: none;
}
#container ul#nav li {
margin-top: 5px;
display: inline;
float: left;
padding: 5px;
text-transform: uppercase;
}
#container ul#nav a {
color: #FFF;
display: inline-block;
}
<body>
<div id="container">
<!--GODBAR-->
<div id="godbar">
<div id="godbarIcons">
<ul>
<li id="godbarFacebook"><a href="http://www.facebook.com/hilounge" target="_blank"><img src="images/godbar_fb.png" alt="hilounge on Facebook" /></a>
</li>
<li id="godbarTwitter"><a href="http://www.twitter.com/hilounge" target="_blank"><img src="images/godbar_twitter.png" alt="hilounge on Twitter"/></a>
</li>
<li id="godbarInstagram"><a href="http://www.instagram.com/hilounge" target="_blank"><img src="images/godbar_instagram.png" alt="hilounge on Instagram" /></a>
</li>
<li id="godbarPinterest"><a href="http://www.pinterest.com/hilounge" target="_blank"><img src="images/godbar_pinterest.png" alt="hilounge on Pinterest" /></a>
</li>
<li id="godbarGplus"><a href="https://plus.google.com/b/108830451064104477365/108830451064104477365/posts" target="_blank"><img src="images/godbar_gplus.png" alt="hilounge on Goolge plus" /></a>
</li>
<li id="godbarRss"><a href="http://feeds.feedburner.com/hilounge" target="_blank"><img src="images/godbar_rss.png" alt="hilounge RSS feed" /></a>
</li>
<li id="godbarEmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=hilounge&loc=en_US" target="_blank"><img src="images/godbar_email.png" alt="hilounge email" /></a>
</li>
</ul>
</div>
<!--END GODBARICONS-->
</div>
<!--END GODBAR-->
<!--BEGIN HEADER-->
<div id="header">
<!--BEGIN LOGO-->
<div id="logo">
<h1><a href="index.html">hiLounge</a></h1>
</div>
<!--END LOGO-->
<!--BEGIN NAVIGATION-->
<ul id="nav">
<h2 class="nav"><li><a href="#"> News </a></li>
<li><a href="#"> Entertainment </a></li>
<li><a href="#"> Fashion </a></li>
<li><a href="#"> Munchies </a></li>
<li><a href="#"> Design </a></li>
<li><a href="#"> Reviews </a></li>
<li><a href="#"> Contests </a></li>
</h2>
</ul>
<!--END NAVIGATION-->
</div>
<!--END HEADER-->
<!--BEGIN CAROUSEL-->
<div id="carousel">
<ul>
<a href="#">Previous</a>
<li><a href="#">Slide 1</a></li>
<li><a href="#">Slide 2</a></li>
<li><a href="#">Slide 3</a></li>
<li><a href="#">Slide 4</a></li>
<li><a href="#">Slide 5</a></li>
<a href="#">Next</a>
</ul>
</div>
<!--END CAROUSEL-->
<!--BEGIN MAIN-->
<div id="primaryContent">
<h1><a href="#"> 10 Best Bongs You Wish You Made</a></h1>
<a href="#"><img src="images/featured-post-featured-image.png" alt="Post Title" /></a>
<!--BEGIN POSTMETADATA-->
<div id="postMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END POSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POSTSHARINGBUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
<a href="#"><img src="images/read-more.jpg" /> Read More </a>
<!-- BEGIN RECENTPOSTS-->
<h2>Recent Posts</h2>
<div id="recentPosts">
<h1><a href="#">5 MUST FOLLOW MARIJUANA FACEBOOK PAGES</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POST SHARING BUTTONS-->
<h1><a href="#">7 MARIJUANA INFOGRAPHICS YOU DON'T WANT TO MISS</a></h1>
<img src="images/featured-image-1.png" alt="post-title" />
<!--BEGIN RECENTPOSTMETADATA-->
<div id="recentPostMetaData">
<ul>
<li><img src="images/date-icon.jpg" /> March 26, 2013</li>
<li><a href="#"><img src="images/category-icon.jpg" /> Entertainment</a></li>
<li><a href="#"><img src="images/author-icon.jpg" /> James Scaggs</a></li>
</ul>
</div>
<!--END RECENTPOSTMETADATA-->
<p>
In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there’s nothing to smoke out of. There’s an art to taking shit from the kitchen, garage, and office and...
<a href="#"> Read More</a>
</p>
<!--BEGIN POST SHARING BUTTONS-->
<div id="postSharingButtons">
<ul>
<li>Like</li>
<li>Tweet</li>
<li>G+</li>
<li>Pin it</li>
</ul>
</div>
<!--END POSTSHARINGBUTTONS-->
</div>
<!--END RECENTPOSTS-->
</div>
<!--END MAIN-->
</div>
<!--END CONTAINER-->
<div id="footerWrap">
<div id="footer">
<div id="footerLogo">
<a href="index.html"><img src="images/footer-logo.jpg" alt="hiLounge" /></a>
</div> <!--end footerLogo-->
<p>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">Legal</a>
<a href="#">Advertising</a>
</p>
<p id="footerInfo">copyright (c) 2013 <a href="http://www.hilounge.com">hiLounge</a>
</p>
</div>
<!--END FOOTER-->
</div>
<!--END FOOTERWRAP-->
</body>
可能重複：http://stackoverflow.com/questions/8405616/均勻空間水平導航項目 – showdev 2013-04-09 20:52:57