1

我有一个名为#menu800px 宽的 div。在其中，我有 8 个导航链接。其中的元素应该尽可能长，并且都应该具有相同的宽度，但它们应该一起在单行上填充父 div（即不换行）。

在每个元素之间，应该有一个 1px 的边框（或者可能是一个 1px 的边距）。所有链接，除了当前页面链接（无论#current应用到哪个链接）都应该有一个1px solid #505050底部边框。虽然当前页面链接不应该有可见的底部边框（以便导航选项卡与内容 div“合并”）。

我当前的代码几乎已经完成了我想要的，但是它缺少链接之间的边框/边距......如果我在两侧添加边框/边距，显然，当前12.5%宽度（参见下面的 CSS 代码）变得不准确，我可以'不要对其进行微调，以便它确实填充#menudiv跨浏览器（元素将溢出#menudiv，或者它们不会填充它 - 在至少一个浏览器中）。

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 不支持 text-shadow 规则，但这不是必需的。

目前的样子 目前的样子

预期结果 预期结果

4

2 回答 2

0

另一种方法是使用 html 表格而不是 div。

#menu {
  宽度：800px;
  边框折叠：折叠；
}

#menu td.other {
  边框：1px 纯黑色；
}
td {
  显示：内联块；
  大纲：无；
  文本对齐：居中；
  宽度：100%；
  填充顶部：12px；
  填充底部：10px；
  背景图片：网址（/img/menu.gif）；
  颜色：#D9D9D9;
  字体粗细：粗体；
  字体大小：13px；
  字体系列：Verdana，无衬线；
  文字阴影：1px 1px #505050;
}
#menu#current {
  背景图像：url(/img/menu_current.gif);
  颜色：#505050 ！重要；
  边框底部颜色：#D9D9D9;
  文字阴影：无；
  左边框：1px 纯黑色；
  右边框：1px 纯黑色；
  边框顶部：1px 纯黑色；
  边框底部：1px 实心#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>

于 2012-10-24T05:05:38.933 回答
0

嗨，我想你想要这个 演示

像这样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 .
}

现场演示

根据您的设计更改颜色或边框。

于 2012-10-24T04:11:14.057 回答