Question

有人可以帮我弄清楚如何在我的导航中均匀分隔我的ul吗？我基本上想要左右5px的填充，然后我希望文本在剩余空间内均匀分布。

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>

Answer 1

不幸的是，如果没有图像，我不确定导航按钮的确切尺寸是什么，所以我无法测试您发布的代码以获得所需的填充/间距。

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

尝试在你的CSS中更改它并调整左右填充＆amp;列表项的边距，直到达到你想要的为止

均匀空间水平导航ul

1 个答案: