我有一个名为#menu
的div,宽度为800px。在它里面,我有8个导航链接。其中的元素应该尽可能长,并且应该都具有相同的宽度,但它们应该一起填充单行上的父div(即没有包装)。
在每个元素之间,应该有1px边框(或者可能是1px边距)。除当前页面链接(应用了#current
之外的任何链接)之外的所有链接都应具有1px solid #505050
底部边框。虽然当前页面链接应不具有可见的底部边框(以便导航选项卡"合并"与内容div)。
我当前的代码几乎完全符合我的要求,但它缺少链接之间的边框/边距...如果我向边添加边框/边距,显然,当前12.5%
宽度(请参阅下面的CSS代码)变得不准确,我无法对其进行微调,以便填充#menu
div 跨浏览器(要么元素会溢出{ {1}} div,或者他们不会填写它 - 至少在一个浏览器中)。
CSS:
#menu
HTML:
#menu {
border:1px solid #505050;
border-bottom:none;
width:800px;
}
#menu a {
display:inline-block;
outline:none;
text-align:center;
width:12.5%;
padding-top:12px;
padding-bottom:10px;
background-image:url(/img/menu.gif);
border-bottom:1px solid #505050;
color:#D9D9D9;
font-weight:bold;
font-size:13px;
font-family:Verdana, sans-serif;
text-shadow:1px 1px #505050;
}
#menu #current {
background-image:url(/img/menu_current.gif);
color:#505050 !important;
border-bottom-color:#D9D9D9;
text-shadow:none;
}
两个要求:
如果:
,这是一个很大的优势您当然可以完全重写CSS / HTML。无需重复使用上述任何代码,我只是展示自己的方法。另外,我知道IE6中不支持text-shadow规则,但这并不是必需的。
目前看起来如何
预期结果
答案 0 :(得分:0)
嗨,我想你想要 Demo
在样式表中添加一些css
,就像这样
#menu{
font-size:0;
}
#menu a {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#menu a + a{
border-left:solid 2px black; // depent your design .
}
的 Live demo 强> 的
根据您的设计更改颜色或边框。
答案 1 :(得分:0)
另一种方法是使用html表而不是div。
#menu {
宽度:800像素;
边界崩溃:崩溃;
}#menu td.other {
边框:1px纯黑色;
}
td a {
显示:内联块;
概述:无;
文本对齐:中心;
宽度:100%;
填充顶:12px的;
填充底:10px的;
背景图像:网址(/img/menu.gif);
颜色:##000000;
字体重量:粗体;
字体大小:13像素;
font-family:Verdana,sans-serif;
text-shadow:1px 1px#505050;
}
#country #current {
背景图像:网址(/img/menu_current.gif);
颜色:#505050!重要;
底部边框颜色:##000000;
文字阴影:无;
border-left:1px纯黑色;
border-right:1px纯黑色;
border-top:1px纯黑色;
border-bottom:1px solid#D9D9D9;
}
<table id="menu" border="0">
<tr>
<td id="current"><a href="/page1.html">Link 1</a></td>
<td class="other"><a href="/page2.html">Link 2</a></td>
<td class="other"><a href="/page3.html">Link 2</a></td>
<td class="other"><a href="/page4.html">Link 2</a></td>
<td class="other"><a href="/page5.html">Link 2</a></td>
<td class="other"><a href="/page6.html">Link 2</a></td>
<td class="other"><a href="/page7.html">Link 2</a></td>
<td class="other"><a href="/page8.html">Link 2</a></td>
</tr>