均匀空间水平导航ul

【问题标题】：evenly space horizontal navigation ul均匀空间水平导航ul
【发布时间】：2013-04-01 11:46:36
【问题描述】：

有人可以帮我弄清楚如何在导航中均匀分布我的 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>

【问题讨论】：

标签： html css html-lists margin


【解决方案1】：

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

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

尝试在您的 css 中更改此项并调整列表项的左右填充和边距，直到达到您想要的效果

【讨论】：

  • 好的，谢谢。正如你所指出的，我已经更新了 CSS，它的间距几乎完美。我将继续为 html 的其余部分设置样式，稍后再回来修复一些小细节。谢谢！
猜你喜欢
  • 2012-01-14
  • 2013-07-19
  • 1970-01-01
  • 2015-02-10
  • 2011-03-16
  • 2015-10-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode