围绕文本添加边框

Question

假使我有一个带有文本的 div 元素。

<div id='page' style='width: 600px'>
  <h1 style='border:2px black solid; font-size:42px;'>Title</h1>
</div>

标题的边框将延伸整个页面的 600 像素，但我希望单词"Title"能够紧密地适应其中。但是，我不知道这个单词有多少像素宽，因此不能将 "Title" 放在 div 中并显式设置其宽度。

有没有一种简单的方法可以使边框适合文本，而文本又没有完全水平延伸到区域的情况？

- Steven Lu

Answer 1

这是因为 h1 是一个块级元素，所以它会延伸到整行（或您给定的宽度）。

您可以通过在 h1 上设置 display:inline，使边框仅围绕文本周围。

示例：http://jsfiddle.net/jonathon/XGRwy/1/

- Jonathon Bolster

Answer 2

尝试将其放入span 元素中：

<div id='page' style='width: 600px'>
  <h1><span style='border:2px black solid; font-size:42px;'>Title</span></h1>
</div>

- shlgug

Answer 3

尝试这个，看看你是否达到了目标：

<div id='page' style='width: 600px'>
  <h1 style='border:2px black solid; font-size:42px; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;'>Title</h1>
</div>

- Ming Huang

Answer 4

最简单的方法是将显示设置为内联块。

<div id='page' style='width: 600px'>
  <h1 style='border:2px black solid; font-size:42px; display: inline-block;'>Title</h1>
</div>

如果你这样做，它应该能够正常工作。

- CODER123

Answer 5

不确定您是否需要这样，但您可以将内部div设置为内联元素。这样，边框应该只包围文本。更好的方法是使用内联元素来表示标题。

解决方案1

<div id="page" style="width: 600px;">
    <div id="title" style="display: inline; border...">Title</div>
</div>

解决方案2

<div id="page" style="width: 600px;">
    <span id="title" style="border...">Title</span>
</div>

编辑： 奇怪的是，SO没有正确地解释我的代码示例作为块，所以我不得不使用内联代码方法。

- Fidi

---

由于某种原因，Markdown拒绝格式化嵌套在列表（无论是“ul”还是“ol”）中的代码块。 - David Thomas

谢谢提供这个信息。我不知道解析器会将它变成一个列表。我已经修复了 :) - Fidi