Question

我正在尝试重新创建一种可以在http://math.stackexchange.com的顶部链接中看到的效果。效果是下面有一些文字和一行，在悬停时，文本和它下面的线段都会改变颜色。

以下是我所拥有的内容：http://jsfiddle.net/4m7zc/我尝试使底部边框重叠，但它不起作用。这样做的适当方法是什么？

HTML

<div class="top-links text-center">
<a href=# class="top-link">TEA </a>
&nbsp;&nbsp;|&nbsp;&nbsp; 
<a href=# class="top-link">COFFEE </a>
&nbsp;&nbsp;|&nbsp;&nbsp; 
<a href=# class="top-link">SODA </a>
&nbsp;&nbsp;|&nbsp;&nbsp; 
<a href=# class="top-link">ALCOHOL </a>
</div>

CSS

.top-links {
font-size:16px;
color: #b77b48;
border-bottom: 4.5px solid #db9356;

}

a.top-link {
color: #b77b48;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid #db9356;
}

a.top-link:hover {
color: red;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid red;
}

Answer 1

如果您想要完全复制网站，可以使用text-align:center上设置ul的列表，然后在每个display:inline-block上设置li。然后只需在鼠标悬停上应用边框到任何链接，并将其下边距偏移到边框宽度，这样它们就不会“弹出”到位。简单！

Demo Fiddle

HTML

<ul>
    <li><a href='#'>Link</a> 
    </li>
    <li><a href='#'>Link</a> 
    </li>
    <li><a href='#'>Link</a> 
    </li>
</ul>

CSS

ul {
    list-style:none;
    text-align:center;
    border-bottom: 3px solid #000;
    margin:0;
    padding:0;
}
li:hover a {
    color: #d02027;
    border-bottom: 3px solid #d02027;
    margin-bottom:-3px;
}
a {
    font-size: 14px;
    color: #000;
    padding: 6px 12px 6px 12px;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
}
li {
    padding: 0 5px;
    display: inline-block;
}

Answer 2

您可以尝试以下操作：

将您的链接显示为inline-blocks，
相对定位，将top更改为与边框高度相同的
为边框使用整数，以避免任何舍入问题：

a.top-link {
    display:inline-block;
    position:relative;
    top:4px;
    color: #b77b48;
    border-bottom: 4px solid #db9356;
}

JSFiddle

如果按钮上方的4px空间对你不利，你可以通过向父母提供-4px的上边距来解决这个问题：

.top-links {
    /* other styles */
    margin-top:-4px;
}

JSFiddle

注意：不要使用&nbsp在元素之间创建边距。这就是CSS属性margin的用途。

Answer 3

使用a属性从text-decoration标记中移除下划线，如下所示，因此它看起来与您期望的类似（而不是更好地对齐线条以删除）

a {
  text-decoration: none
}

JSFiddle

Answer 4

试试这个＆gt;＆gt;＆gt;＆gt; DEMO JSFIDDLE 我从a元素中删除了文本修饰，然后重新排列了代码的顺序，并添加了一些CSS和HTML，因此导航不会与jsfiddle中可以看到的行混淆。
HTML

<div class="top-links text-center">
   <a href=# class="top-link">&nbsp;NEWEST&nbsp;</a>
<div class="line">|</div>
   <a href=# class="top-link">&nbsp;POPULAR&nbsp;</a>
<div class="line">|</div>
   <a href=# class="top-link">&nbsp;TAGS&nbsp;</a>
<div class="line">|</div>
   <a href=# class="top-link">&nbsp;USERS&nbsp</a>
</div>

和CSS

.top-links {
font-size:16px;
color: #b77b48;
/*border-bottom: 4.5px solid #db9356;*/
}

a.top-link {
color: #b77b48;
border-bottom: 4.5px solid #db9356;
}

a.top-link:hover {
color: red;
border-bottom: 4.5px solid red;
}

.line {
display:inline;border-bottom: 4.5px solid #db9356;
margin:-4px;
}

a {
text-decoration:none;
}

检查http://jsfiddle.net/dC8P2/2/处的jsfiddle - 如果您需要更多帮助，或者这不起作用请回复。 这可以100％。

Answer 5

请你这个HTML - 它更准确

<强> HTML

<ul id="nav">
    <li><a href="#">Tea</a></li>
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Soda</a></li>
    <li><a href="#">Alcohol</a></li>
</ul>

<强> CSS

#nav {
    margin:0;
    padding:0;
}
#nav li {
    float: left;
    list-style:none;
}
#nav a {
    display: block;
    border-bottom: 3px solid #000;
    padding: 5px 15px;
    text-decoration: none;
}
#nav a:hover {
    border-bottom: 3px solid #f00;
}

在悬停时更改边框底部特定区域的颜色

5 个答案:

Demo Fiddle