Question

在我的网站上，我有一个导航栏（带有链接的伪按钮）。整个导航栏有一个底部边框，用于将菜单与下面的内容分开。

现在，使用HTML和CSS我希望在子菜单中实现与stackoverflow类似的效果，如下所示：

enter image description here

除选定的菜单项外，整个导航栏都有一个底部边框。这看起来像一张注册卡，或类似的。

我当前的菜单CSS如下所示：

.nav-main {
    clear: both;
    background: #fff;
    padding: 0;
    border-bottom: 1px solid rgb(204, 204, 204);
}
.nav-main-link {
    color: #666 !important;
    background: rgba(230, 236, 182, .99);
    display: block;
    font-weight: 700;
    padding: 5px 10px;
}
.nav-main-link:hover,
.nav-main-selected {
    background: #738925;
    color: #fff !important;
    text-decoration: none;
}

HTML部分：

<div class="nav-main">
    <ul class="nav-main-list">
        <li class="nav-main-item nav-main-test1">
            <a href="../index.php/test1" class="nav-main-link nav-main-selected">Test 1</a>
        </li>
        <li class="nav-main-item nav-main-test2">
            <a href="../index.php/test2" class="nav-main-link">Test 2</a>
        </li>
    <div class="nav-main-clear">
    </div>
</div>

在HTML + CSS中有没有简单的方法来实现所描述的行为？

PS：很抱歉这个问题的标题，但我不确定如何更好地命名：）

Answer 1

这不是那么复杂

我想你正在使用带有以下链接的无序项目列表：

<ul>
    <li><a href="...">Link 1</a>
    ...
</ul>

在这种情况下，您应该将样式设置为UL以具有底部边框。这将显示在整条线上。

ul {
    list-style: none;
    text-align: right;
    border-bottom: 1px solid #000;
}

现在你必须设置个人LI的风格。特别是选定的一个。如果将一个像素（或边框厚度）移动到较低的位置并将其底部边框设置为背景颜色或为其提供背景颜色，则它将覆盖UL底部边框。然后还将其设置为其他边框，以便显示为选项卡。

li.selected {
    display: inline-block; /* to flow them horizontally */
    background-color: #fff;
    margin-bottom: -1px;
    border-width: 1px 1px 0 1px;
    border-color: #000;
    border-style: solid;
}

这是working example。

Answer 2

我的尝试：

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
    <div class="header">
        <ul>
            <li>Page 1</li>
            <li id="checked">Selected Page</li>
            <li>Page 2</li>
            <li>Page 3</li>
            <li>Page 4</li>
            <li>Page 5</li>
        </ul>
    </div>
</body>
</html>

的CSS：

.header ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border-bottom: solid;
    border-bottom-width: 1px;
    border-bottom-color: #eeeeee;
}
.header li{
    display: inline-block;
    padding: 10px;
}
#checked{
    display: inline-block;
    margin: 0 0 -1px 0;
    border: solid;
    border-color: #eeeeee;
    border-width: 1px;
    border-bottom-color: #fff;
    padding: 10px;  
}

小提琴：Link

导航栏中链接/按钮的条件边框

2 个答案:

这不是那么复杂