边框底部属性给出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

正如RaySinlao说，display:block将使所有的方式展开。如果您想让下一个元素转到下一行，则display:inline将不起作用。使用display:table。表将收缩包装（以适应内容）或展开（修复weird bugs）或clearfix。想想看，桌子有很多东西。

Answer 4

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

输出：

---