html - 文本有边框环绕

标签 html css layout

假设我有一个包含一些文本的 div

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

标题的边框将扩展整个页面的所有 600 像素,但我希望“标题”一词能够紧紧地放在里面。但是,我事先不知道这个词有多少像素宽,所以我不能将“标题”放在一个 div 中并明确设置它的宽度。

有没有一种简单的方法可以使边框适合未完全水平延伸穿过某个区域的文本?

最佳答案

这是因为h1是一个 block 元素,所以它会延伸到整条线(或者你给的宽度)。

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

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

关于html - 文本有边框环绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4689481/

相关文章:

html - 点不会内联并且列表不会居中

css - 有什么有效的方法可以在 Firefox 中显示虚拟滚动条吗?

ios - 动画 UIButton 在文本更改时更改位置

ruby-on-rails - 为不同的布局使用不同的 CSS

html - 如何重定向页面但不更改浏览器的网址?

javascript - 带 .delay 的进度条

javascript - 单击重复菜单更改类名

jquery - 我的动画卷轴滞后,为什么

html - 调整浏览器大小时,我的网站也会随之调整大小

css - div 布局(浮在其他元素上)