html - 边框直到文本内容

Question

我正在尝试为菜单中的文本添加边框。我想要的是边框宽度与文本一样长。我已经为单行菜单项实现了这一点。

如您在屏幕中所见，菜单项“test av lister”的边框宽度正确，但下一项的宽度更大。我希望宽度在第一行结束的地方停止。

到目前为止，这是我实现此目的的 CSS

.mp-pusher .title__content {
   border-bottom: 3px solid #fff;
   width: fit-content;
}

Answer 1

如果您将所有这些元素都看作一个盒子，您就会明白为什么边框会在整个元素上移动。

* {
  border: 1px solid red;
}

这是一个正在发生的事情的例子:

.menu li {
  display: inline-block;
  margin-top: 10px;
  border: 1px solid blue;
  border-bottom: 3px solid red;
}

https://jsfiddle.net/sheriffderek/bmLj7fo0/

还有:我不确定“fit-content”和那些宽度属性是否可以使用了。 https://developer.mozilla.org/en-US/docs/Web/CSS/width .您可以在实验性选项旁边看到一个小小的“疯狂科学家”药水。

作为用户...我会发现这种视觉处理很奇怪。也许您可以为最小的屏幕设计一种新的视觉风格。 :)