0

如何干净地设置 HTML + CSS 水平选项卡栏的样式，以便选项卡栏在底部有一条线，对于活动选项卡隐藏或抑制？

换句话说，我正在尝试做与 StackOverflow 对其标签所做的相同的事情： 在此处输入图像描述

我的标签栏设置为有序列表

ul
{
  list-style: none;
}
li
{
  float: left;
}

更新：我已经用 Firebug 浏览了网站，看看他们是如何做到的，但我觉得我很快就会陷入细节的困境。例如，StackOverflow 的版本在整个 div 的底部有一个边框（这很有意义），在活动选项卡的底部有一个白色边框（这是有道理的），但是它使活动选项卡的边框与 div 的边框重叠（而且我不太清楚它是如何做到的）。看起来Twitter Bootstrap做了类似的事情。我试图了解容器边框的重叠部分与内容边框的重叠部分如何工作的一般概念，而不是复制和修补 CSS，直到我得到一些似乎可以工作的东西。

4

4 回答 4

1

您需要做的就是在 ' 上放置一个底部边框<ul>（以便它延伸），然后给<li>'sa 选定的类，并使该类的高度高 1 像素。

这是一个非常简单的例子：http: //jsfiddle.net/V6gzS/

于 2013-01-18T14:54:32.810 回答
0

据我了解，您可以自己制作带有水平底线的按钮。

如果是这种情况，请确保将这条水平线作为border-bottom: solid 1px #CCC每个按钮的属性（颜色可能不同）。然后，在每个页面上，您将 id 添加id="current"到作为活动页面的那个按钮。在 CSS 中你写：

#current {
  border: solid 1px #CCC;
  border-bottom: 1px solid white;
}

如果您有任何问题，可以通过添加!important以下内容来解决：

  border-bottom: 1px solid white !important;

因此，这只是 CSS 中的四行额外代码和每个文件中的一个额外 HTML 属性。

如果是动态菜单

如果您的菜单不是在每个页面上都是静态的，而是可能动态生成或放置在包含的文件中，那么上述内容将是不可能的。因为那样你就不能轻易地在每个单独的页面上添加新的 id。

在这种情况下，您可能会对属性进行一些动态添加。如果使用服务器端语言，例如 PHP，那么您可能能够轻松设置if{...}检查 URL 或 GET 请求等的命令。id否则，如果按钮文本等于页面上的某个标题，您可能会使用一些 javascript 来检查每个按钮并添加属性。

我希望你明白。祝你好运。

于 2013-01-17T15:34:08.657 回答
0

可以为您指出正确的方向，使用 firebug 或 chromes 元素检查器，只需选择您需要的位，例如，在此站点上，您要查找的内容称为选项卡，它们的样式如下

#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
 }

这只是其中的一部分，但是您可以通过查看一些代码来学到很多东西

于 2013-01-17T15:15:03.570 回答
0

我是这样做的：

ul {
    list-style-type:none;
}
li{
    float: left;
    border-bottom: 1px solid #CCC;
}
li:hover{
    float: left;
    border: solid 1px #CCC;
    border-bottom:none;
}
于 2017-01-20T21:29:26.863 回答