0

h1タグに太いアンダースコアを追加したかったので、複数のStackOverflowの質問で提案されているように「border-bottom」を使用しました。ただし、境界線はテキストをはるかに超えて拡張されたため、境界線をテキストの境界に一致させるために、表示プロパティ「inline-block」を追加することにしました。ただし、これにより、コンテンツの後に要素に改行がなくなりました。いつでも「br」タグを追加できることはわかっていますが、それをスタイリングに残したいと思います。何か私にできることはありますか？これが私の現在のCSSです：

h1
{
    font-weight:normal;
    margin-bottom:5px;
    border-bottom: 2px solid;
    display: inline-block;
}
4

3 に答える 3

7

display: table代わりに試してください。子の幅まで折りたたむという点でインラインブロックと同様に機能しますが、通常のブロック要素と同じように、周囲のインライン要素がその横に流れるのを防ぎます。

http://codepen.io/cimmanon/pen/FvGxl

于 2013-02-25T01:19:27.523 に答える
3

テキストの幅<h1>が固定されている場合は、を設定しwidthて保持できdisplay: block;ます。

デモ： jsFiddle

出力：

ここに画像の説明を入力してください

CSS：

h1 {
    border-bottom: 2px solid black;
    font-weight:normal;
    margin-bottom:5px;
    width: 140px;
}

HTML：

<h1>underlined</h1>
next line
于 2013-02-25T01:04:29.750 に答える
1

常にborder-bottom（たとえば、パディング付きのナビゲーションアイテム）が必要なわけではないため、この方法の方が効果的です。

h1:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

テキストと下線の間に多少のスペースが必要な場合は、を追加しmargin-topます。

より太い下線が必要な場合は、さらに追加してくださいheight：

h1:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}
于 2016-06-20T11:16:20.740 に答える