CSS 中每个 <h1> 标题下方的水平线/线答案

【问题标题】：Horizontal rule/line beneath each <h1> heading in CSSCSS 中每个 <h1> 标题下方的水平线/线
【发布时间】：2014-07-02 02:34:24
【问题描述】：

我正在尝试在每个实例下方自动放置一条 100% 水平线（规则）

 <h1>

使用 CSS 的标题标签。

我希望看到的示例：

--- 截图 8

简介

--- 截图 8

我的 CSS 中有这个：

.mypage .headline {
    font-family: Calibri, "Helvetica", san-serif;
    line-height: 1.5em;
    color: black;
    font-size: 20px;
}

我的 HTML 主页中有这个：

<body class="mypage">
<h1><span class="headline">Introduction</span></h1>

我不知道如何在每次使用标题类的下方显示一条水平线。

【问题讨论】：

使用border-bottom: 1px solid #ccc;
span 有实际用途吗？如果没有，标题类应该放在 h1 上（虽然看起来有点多余，因为 h1 中的 H 意味着标题......）

标签： html css

【解决方案1】：

您也可以尝试使用 Pseudoclass :after. 。我在我的一个应用程序中使用了这种样式。

http://jsfiddle.net/ffmFQ/

h1:after
{
    content:' ';
    display:block;
    border:2px solid black;
}

你可以多做一些整理来设计这样的样式：- http://jsfiddle.net/5HQ7p/

h1:after {
    content:' ';
    display:block;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

【讨论】：

【解决方案2】：

h1 { border-bottom: 1px solid black }

根据喜好调整大小和颜色。

【讨论】：

【解决方案3】：

您应该使用border-bottom CSS 属性。

对于 HTML，请使用以下代码：

<h1>Introduction</h1>

对于 CSS，使用以下代码：

h1
{
    border-bottom:1px solid #CCC;
    padding-bottom:3px;
}

如果您想使用float:left, float:right 属性，那么您还必须使用width:100% 属性。 padding-bottom 是可选地在文本和水平线之间留出一些空间。

h1
{
    border-bottom:1px solid #CCC;
    float:left;
    width:100%;
    padding-bottom:3px;
}

代码演示：http://jsfiddle.net/aASQe/

【讨论】：

【解决方案4】：

border-bottom 是您所需要的...并且要修改行与文本的距离，请使用 padding-bottom。

【讨论】：

【解决方案5】：

为什么不直接使用border-bottom？你也可以删除跨度..

HTML：

<h1 class="headline">Introduction</h1>

CSS：

h1 {
  width:100%;
  border-bottom: solid 1px #666;
}

【讨论】：

【解决方案6】：

如果您觉得有问题，可以使用zoom: 1;。请参阅this fiddle

（我已经删除了span，但你可以将class设置为你的h1标签。）

CSS

h1 {
    font-family: Calibri, "Helvetica", san-serif;
    line-height: 1.5em;
    color: black;
    font-size: 20px;
    border-bottom: 2px solid red;
    zoom: 1;
}

HTML...

<h1>Introduction</h1>

【讨论】：