Question

我的网站顶部有一个horz导航栏，有7个文本链接＆amp;文本链接之间有6个子弹。有没有办法均匀地分隔文本链接＆amp;横跨导航栏的子弹horz。我用以下代码累了，一切都很好，除了子弹间距很奇怪和关闭。非常感谢对此的一些帮助。这是我的代码。

这是我的小提琴代码的链接：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;的组合为中心。

Screenshot

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;
}

Answer 2

您可以ul拥有text-align: justify来证明您的列表元素。然后，创建一个:after个width: 100%元素，让它认为还有另一条线。

请看这里:(抱歉，我删除了一些CSS以便于阅读。）

http://jsfiddle.net/ECf2u/

div#container{
width:1020px;

}
div#container ul {
width: 100%;
text-align: justify;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul:after {
content: "";
width: 100%;
display: inline-block;
}
div#container ul li {
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;    
text-align: center;
display: inline-block;
position: relative;
}

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
}

Answer 3

这是一个更简单的解决方案，使用CSS3 flex。

它完全证明了菜单项，在子弹周围均匀分布空间。

如果没有额外的空<li><\li>元素，我无法弄清楚如何做子弹。

Link to CodePen

.menu { font: 14px "Arial Narrow", Arial, sans-serif; list-style-type: none; padding:3px }
.menu a { color: black; text-decoration: none }
.menu a:visited, .menu a:active { color: #666 }
.menu a:hover { color: #c00 }
.menu { display:flex; justify-content:space-between; border: 1px solid black; border-width: 1px 0 }
.menu li:empty:after { content:"\2022" }

<ul class="menu">
<li><a href="/entertainment">ARTS &amp; ENTERTAINMENT</a></li><li></li>
<li><a href="/technology">TECHNOLOGY</a></li><li></li>
<li><a href="/auto">AUTO</a></li><li></li>
<li><a href="/sports">SPORTS</a></li><li></li>
<li><a href="/news-briefs">NEWS BRIEFS</a></li><li></li>
<li><a href="/greentech">GREEN ECONOMY</a></li><li></li>
<li><a href="/career-news" target="_blank">CAREER NEWS</a></li>
</ul>

在导航栏上的链接之间均匀分隔出horz链接和子弹

3 个答案: