19

我正在尝试在每个实例下方自动放置一条 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>

我无法弄清楚如何在每次使用标题类的下方出现一条水平线。

4

6 回答 6

43

您也可以尝试使用 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);
}
于 2013-04-18T02:13:00.440 回答
19 
h1 { border-bottom: 1px solid black }

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

于 2013-04-18T02:06:47.627 回答
11

您应该使用border-bottomCSS 属性。

对于 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/

于 2013-04-18T05:52:48.847 回答
4

border-bottom是你需要的......并修改线与文本的距离，使用padding-bottom.

于 2013-04-18T02:06:51.763 回答
1

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

HTML：

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

CSS：

h1 {
  width:100%;
  border-bottom: solid 1px #666;
}
于 2013-04-18T02:07:02.473 回答
0

如果您感觉有问题，您可以使用zoom: 1;. 看到这个小提琴

（我已删除span，但您可以将类设置为您的 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>
于 2013-04-18T03:37:18.267 回答