【问题标题】：Border bottom property gives the h1 tag 100% border width边框底部属性赋予 h1 标签 100% 边框宽度
【发布时间】：2014-02-24 13:42:29
【问题描述】：

我已经使用了这个h1，我已经给它一个类并在它的底部应用了边框，这样我就可以给出一个很好的下划线效果。我可以使用text-decoration 属性，但给出粗体下划线效果使我能够拥有下划线的宽度。当我给h1 下划线时，边框将达到容器的 100% 全宽。请告诉我如何解决它。谢谢。

【问题讨论】：

首先通过提供一些代码来完成问题..

标签： css

【解决方案1】：

使用display: inline H1之所以一直显示边框是因为它默认是一个显示块。希望这会有所帮助！

【讨论】：

【解决方案2】：

因为h1 是块级元素，默认情况下该元素采用 100% 的宽度。所以让它成为一个内联元素。

这里是用于将h1 构建为内联元素的 CSS。

h1{border-bottom:1px solid red;display:inline-block;}

这里是 HTML

<h1>My First Heading</h1>

这是一个演示。http://jsbin.com/voyuluyo/1/edit

【讨论】：

【解决方案3】：

HTML

<h1 class="headings"> hi this is SO </h1>

<h1 class="headings1"> hi this is SO </h1>

CSS

.headings
{
    border-bottom:10px solid black;
    
}

.headings1
{
    display:inline-block;
    border-bottom:10px solid red;
}

小提琴

Working Demo

输出：

【讨论】：

【解决方案4】：

正如RaySinlao 所说，display:block 将使其一路扩展。如果你想让下一个元素转到下一行，display:inline 将不起作用。使用display:table。表格将收缩包装（以适应内容）或展开（以修复weird bugs）或clearfix。想想看，桌子做了很多事情。

【讨论】：