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

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

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 - 元素中左右保留一些空格，以便于点击或使用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 2

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

您的所有<a>上都有左/右缩进，这些缩进出现在您网页上的<li>内。

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 4

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

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

Answer 5

使用伪选择器：after并添加宽度：fit-content;到所需的元素（在您的情况下为'a'元素）：

cnt = cnt + 1

下划线的宽度将与文本的宽度一样。

不再仅为文本加下划线

5 个答案: