html - 仅下划线文本不再

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;
}

如果有人有任何想法那就太好了。谢谢。 -贝丝

Answer 1

减少填充，增加边距。你的<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>