html – 链接末尾带有额外下划线的字符

2024年1月12日 276次阅读

我有两个数字(带字幕),并排,每个数字作为一个链接.由于某种原因,左侧链接的文本有一个额外的带下划线的空格,即使它没有出现在我的html文件中.这可能是间距问题吗？我是CSS的新手,所以可能存在裁员/矛盾.

以下是问题的预览：Zoomed image

#leg {
  text-align: center;
}
#leg_tag {
  text-align: center;
  color: white;
}
.leg_link {
  margin-left: 10px;
  margin-right: 10px;
}
figure {
  display: inline-block;
  margin: 0 auto 0 auto;
}
<div id="leg">
  <p id="leg_tag">How to reach me:</p>
  <a class="leg_link" href="..." target="_blank">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My GitHub!</p>
      </figcaption>
    </figure>
  </a>
  <a class="leg_link" href="...">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My LinkedIn!</p>
      </figcaption>
    </figure>
  </a>
</div>

编辑：问题已经解决,但我仍然很好奇为什么第二个链接没有空格,而第一个链接没有空格.想法？

最佳答案 设置要显示的链接：inline-block,然后您可以添加文本修饰：如果需要,将下划线添加到文本本身(< p>).

#leg {
  text-align: center;
}
#leg_tag {
  text-align: center;
  color: white;
}
.leg_link {
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
}
.leg_link figure {
  display: inline-block;
  margin: 0 auto 0 auto;
}
.leg_link p {
  text-decoration: underline;
}
<div id="leg">
  <p id="leg_tag">How to reach me:</p>
  <a class="leg_link" href="..." target="_blank">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My GitHub!</p>
      </figcaption>
    </figure>
  </a>
  <a class="leg_link" href="...">
    <figure>
      <img src="..." width="30" height="30">
      <figcaption>
        <p>My LinkedIn!</p>
      </figcaption>
    </figure>
  </a>
</div>

其原因是因为< a>.默认情况下,它是一个内联元素,并且您在其中嵌套了内联块/块级元素,而不更改锚的显示属性.

从CSS 2.1 Spec：

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

点赞