边框底部属性为h1标签提供100％的边框宽度

Question

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

Answer 1

使用display: inline H1一直显示边框的原因是因为默认情况下它是一个显示块。希望这有帮助！

Answer 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

Answer 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

<强>输出：

---

Answer 4

正如RaySinlao所说，display:block将使它一直扩展。如果您想让下一个元素转到下一行，display:inline将无法正常工作。使用display:table。表将收缩包装（以适合内容）或展开（以修复weird bugs）或clearfix。想想看，桌子做了很多东西。