html - 在导航栏中的链接之间均匀间隔 horz 链接和元素符号

Question

我的网站顶部有一个水平导航栏，其中有 7 个文本链接和文本链接之间的 6 个元素符号。有没有办法在导航栏上均匀地分隔文本链接和元素符号 horz。我用下面的代码厌倦了它，除了子弹间距很奇怪而且关闭之外，一切都很好。非常感谢您对此提供的帮助。这是我的代码。

这是我在 fiddle 上的代码的链接:http://jsfiddle.net/mountart/bdzcv/

<style type="text/css">


div#container{
width:1020px;

}
div#container ul {
display:table;
width: 100%;
margin:0px 0px;
padding-left:0px;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul li {
display:table-cell;
height:20px;
line-height:20px;
width:14.285%;
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;    
padding:0px 0px;
text-align: center;
border-right:none;
}
div#container ul li:last-child {
border-right:none;
}

div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
div#container li.headerbullet
{
float:left;
display:inline-block;
width:auto;
margin-left:5px;
margin-right:0px;
height:20px;
line-height:20px;
}
div#container li.headerbullet img
{
margin-top:10px;
}

</style>


<div class="clear"></div>


<div id="container">
<ul>
<li><a href="<%=BaseURL%>/entertainment">ARTS & ENTERTAINMENT</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/technology">TECHNOLOGY</b></a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/auto">AUTO</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/sports">SPORTS</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/news/more-news-briefs.asp">NEWS BRIEFS</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>



<li><a href="<%=BaseURL%>/greentech">GREEN ECONOMY</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li><a rel="nofollow" href="http://www.hirediversity.com" target="_blank">CAREER NEWS</a>    </li>
</ul>
</div><hr style="margin-top:4px"/>

Answer 1

让我们清理一些 HTML 和 CSS :)

我们可以只使用每个链接的 li 父级来创建元素符号。 #container li 上的填充将均匀地分隔元素符号，无论您想要多大的间隙。

已更新

菜单由 margin: auto; 和固定宽度(在本例中 - width: 776px;)的组合居中。

Have a fiddle!

HTML

<div id="container">
    <ul>
        <li>
            <a href="%3C%=BaseURL%%3E/entertainment">ARTS &amp; ENTERTAINMENT</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/technology">TECHNOLOGY</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/auto">AUTO</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/sports">SPORTS</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/news/more-news-briefs.asp">NEWS BRIEFS</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/greentech">GREEN ECONOMY</a>
        </li>
        <li>
            <a href="http://www.hirediversity.com" rel="nofollow" target="_blank">CAREER NEWS</a>
        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#container {
    overflow: hidden;
}
#container ul {
    margin: 10px auto;
    width: 776px;
    border-bottom: dotted 1px #CCC;
    overflow: auto;
    padding: 0 0 10px;
}
#container li:first-child {
    list-style: none;
    margin: 0 0 0 18px;
}
#container li {
    float: left;
    font-family:"Arial Narrow", Arial, sans-serif;
    font-size: 0.8em;
    padding: 0 30px 0 2px;
}
#container a:link {
    color: #000;
    text-decoration: none;
}
#container a:hover {
    color: #F00;
    text-decoration: underline;
}