我的网站顶部有一个水平导航栏,其中有 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"/>
最佳答案
让我们清理一些 HTML 和 CSS :)
我们可以只使用每个链接的 li
父级来创建元素符号。 #container li
上的填充将均匀地分隔元素符号,无论您想要多大的间隙。
已更新
菜单由 margin: auto;
和固定宽度(在本例中 - width: 776px;
)的组合居中。
HTML
<div id="container">
<ul>
<li>
<a href="%3C%=BaseURL%%3E/entertainment">ARTS & 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;
}
关于html - 在导航栏中的链接之间均匀间隔 horz 链接和元素符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24707257/