仅下划线文本不再

Question

我已经经历了大部分我能找到的东西，但没有幸运。我只想从文本链接的开始处将文字链接加下划线到结尾。我会认为这应该很简单。我的工作在该网站是：

http://tahoe-luxury-properties.com/index4.html 

顶部导航的链接有在底部边框，但他们正在扩展比文本链接较大。我使用下面的CSS：

.hot-menu { 
    font-size: 13px; 
    letter-spacing: 1.1px; 
    font-weight: 400; 
    font-family: "Oswald", Arial, Helvetica; 
    line-height: 20px; 
    float: left; 
    text-align: center; 
    border-bottom-color: #0CF; 
    border-bottom-style: solid; 
    display: table; 
    border-bottom-width: fit-content; 
    margin: 5px; 
} 

如果任何人有这将是巨大的任何想法。谢谢。 -Beth

Answer 1

您的页面上出现<li>的所有<a>左/右缩进。

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 7px 11px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: "abc-modern",sans-serif; 
} 

覆盖此样式，如下所示删除左/右缩进。

.hot-menu li a { 
    padding-left: 0; 
    padding-right: 0; 
} 

Answer 2

将边框应用于具有填充的元素。

padding: 7px 11px;

填充适用于元件的内部，从而拉伸该元件。边框被应用到你的元素，考虑到填充是伸展它。

试着改变你的风格：

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 7px 0; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: "abc-modern",sans-serif; 
} 

li a + a { 
    margin-left: 11px; 
} 

的a + a选择每a - 元素由一个a - 元素之前。

如果您想在您的a -Element中保留一定的空间左右，以方便点击目的或w/e。

你可以试试下面的（没有测试）：

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 7px 11px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: "abc-modern",sans-serif; 
} 

.hot-menu:after { 
    content: ""; 
    display: block; 
    background-color: #0cf; //colors are written in small characters usually 
    height: 5px; 
    width: calc(100% - 11px); 
    position: absolute; 
    left: 11px; 
    bottom: 0; 
} 

Answer 3

降低您的填充，增加你的保证金。您的<a class='hot-menu'>标记从li a继承了11px的水平填充。边框将跨越填充，但不包括边距。运行该代码段，查看比较：

.hot-menu { 
 
    font-size: 13px; 
 
    letter-spacing: 1.1px; 
 
    font-weight: 400; 
 
    font-family: "Oswald", Arial, Helvetica; 
 
    line-height: 20px; 
 
    float: left; 
 
    text-align: center; 
 
    border-bottom-color: #0CF; 
 
    border-bottom-style: solid; 
 
    display: table; 
 
    border-bottom-width: fit-content; 
 
    margin: 5px; 
 
    padding: 7px 11px; /* <-- This is inherited from li a */ 
 
} 
 

 
.hotter-menu { 
 
    font-size: 13px; 
 
    letter-spacing: 1.1px; 
 
    font-weight: 400; 
 
    font-family: "Oswald", Arial, Helvetica; 
 
    line-height: 20px; 
 
    float: left; 
 
    text-align: center; 
 
    border-bottom-color: #0CF; 
 
    border-bottom-style: solid; 
 
    display: table; 
 
    border-bottom-width: fit-content; 
 
    margin: 5px 10px; /* <-- Fix */ 
 
    padding: 7px 0px; /* <-- Fix */ 
 
}

<a class="hot-menu">Old Version</a> 
 
<a class="hotter-menu">New Version</a>

Answer 4

删除边框形式.hot-menu 添加样式

li a { 
    border-bottom: 1px solid #0CF; 
    padding: 7px 0px; 
}