我有一个名为 #menu
的 div,它有 800 像素宽。在其中,我有 8 个导航链接。其中的元素应尽可能长且宽度应相同,但它们应一起在一行中填充父 div(即不换行)。
在每个元素之间,应该有一个 1px 的边框(或者可能是一个 1px 的边距)。所有链接,除了当前页面链接(应用 #current
的链接)都应该有一个 1px solid #505050
底部边框。当前页面链接不应有可见的底部边框(以便导航选项卡与内容 div“合并”)。
我当前的代码几乎已经完成了我想要的,但是它缺少链接之间的边框/边距...如果我在两侧添加边框/边距,显然,当前的 12.5%
宽度(请参阅下面的 CSS 代码)变得不准确,我无法对其进行微调以使其填充 #menu
div cross-browser(元素会溢出#menu
div,否则他们不会填充它 - 至少在一个浏览器中)。
CSS:
#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;
}
HTML:
<div id="menu">
<a href="/page1.html" id="current">Link 1</a>
<a href="/page2.html">Link 2</a>
<a href="/page3.html">Link 3</a>
<a href="/page4.html">Link 4</a>
<a href="/page5.html">Link 5</a>
<a href="/page6.html">Link 6</a>
<a href="/page7.html">Link 7</a>
<a href="/page8.html">Link 8</a>
</div>
两个要求:
- 该解决方案应适用于 IE6 及更高版本的 IE,以及最新版本的 Firefox、Chrome、Safari 和 Opera
- 请不要使用 JavaScript
这是一个很大的优势,如果:
- 该解决方案有效,因此无需重新调整元素的宽度即可添加链接
您当然可以完全重写 CSS/HTML。无需重复使用上面的任何代码,我只是展示我自己的方法。另外,我知道 IE6 不支持文本阴影规则,但这不是必需的。
目前的样子
预期结果
最佳答案
嗨,我想你想要这个 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 .
}
根据您的设计更改颜色或边框。
关于html - 我怎样才能用它的子元素完全填充父 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13042865/