均匀空间水平导航ul

有人可以帮我弄清楚如何均匀地将我的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&amp;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>

来源

2013-04-09 jamesscaggs

可能重复：http://stackoverflow.com/questions/8405616/均匀空间水平导航项目 – showdev 2013-04-09 20:52:57

不幸的是没有图像我不能确定你的导航按钮的确切大小必须，所以我不能测试你发布到获得您想要填充/间距的代码。

#container #godbar #godbarIcons ul { 
    margin: 0 auto; 
    padding: 0; 
} 
#container #godbar #godbarIcons li { 
    float: left; 
    padding-right: 0; 
    list-style: none; 
}

尝试在你的CSS改变这一点，并调整左右填充清单项目，直到你的&利润率达到你想要的东西

来源

2013-04-09 21:41:53 Dylan

好的，谢谢。我已经更新了CSS，正如你注意到的那样，它的间隔几乎完美。我将继续留下HTML的其余部分，稍后再回过头来解决这些小细节。谢谢！ – jamesscaggs 2013-04-10 18:04:09

没问题，@ user2263560 – Dylan 2013-04-10 20:32:47

均匀空间水平导航ul

回答

相关问题