Question

我正在尝试在

的每个实例下面自动放置100％水平线（规则）

 <h1>

使用CSS的标头标记。

我想看到的例子：

--- snip 8＆lt; ---

简介

--- snip 8＆lt; ---

我的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>

我无法弄清楚如何在每次使用标题类之后出现水平线。

Answer 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);
}

Answer 2

h1 { border-bottom: 1px solid black }

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

Answer 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/

Answer 4

您需要

border-bottom ...并修改该行与文字的距离，请使用padding-bottom。

Answer 5

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

HTML：

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

CSS：

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

Answer 6

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

（我已删除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>

CSS </h1>中每个<h1>标题下方的水平规则/行

6 个答案:

CSS