6

-titleに下線を引こうとしh1ていますが、何らかの理由で常に親 div の全長が必要です。position: absolute私がそうすることができた唯一の方法は、css に -property を追加することでした...

これはデザインです：
ここに画像の説明を入力

そして、これは私が得るものです：
ここに画像の説明を入力

ポイントは、青色の線を と同じ幅にしh1、親 div の下に灰色の境界線を引くことです。

HTML: 

<div class="title">
    <h1>Contacteer ons</h1>
</div>

CSS:

h1 {
    border-bottom: 8px solid #57c4d0;
    position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}

.title {
    border-bottom: 1px solid #dedede;
}

Web サイト全体で HTML を使用することを計画しているので (それぞれh1の長さが異なり、各タイトルに固定幅を追加することはできません)、堅牢なソリューションを探しています。アドバイスのある人はいますか？

4

3 に答える 3

15

h1に変更できますdisplay: inline-block;

（明確にするために追加された）で実際margin-bottomの例を参照してください：.title

http://jsfiddle.net/P4BGC/

于 2012-07-25T22:01:49.577 に答える
1

このフィドルを参照してください。H1 はブロック要素なので、親を埋めるために成長します。を設定できますがdisplay: inline、独自の div (または を含む他の要素display: block) に配置して、コンテンツが横に並ばないようにすることもお勧めします。

<div><h1>Hello, world</h1></div>
Lorem ipsum

CSS

​h1 {
  border-bottom: 3px solid red;
  display: inline;
}​
于 2012-07-25T22:09:47.683 に答える