0

有人可以帮我弄清楚如何将我的 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>
4

1 回答 1

0

不幸的是，如果没有图像，我不确定导航按钮的确切大小需要是多少，因此我无法测试您发布的代码以获得所需的填充/间距。

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

尝试在你的css中改变它并调整列表项的左右填充和边距，直到你达到你想要的

于 2013-04-09T21:41:53.653 回答