6

内部にネストされた h1 を持つ中央の div があります。HTMLのデフォルトよりも太い線で下線を引く方法はありますか?

4

5 に答える 5

15

Uこれにより、タグの下線を制御できます。

<style type="text/css">
  u {
    text-decoration: none;
    border-bottom: 4px solid black;
  }
</style>

この場合、下線は 4 ピクセルになります。

于 2010-06-28T18:05:24.537 に答える
6

いいえ、ありません。下線の太さはブラウザに依存し、CSS (または HTML) では影響を受けません。

text-underline-widthCSS3 Text ドラフトで提案されたプロパティがかつてありました。しかし、それに対する関心は十分ではなく、2005 年にドラフトから削除されました。おそらく実装されることはありませんでした。

通常の回避策は、下線の代わりに下罫線を使用することです。ただし、別物なので注意。下の境界線は行ボックスの下にありますが、下線は通常、テキストのベースライン上にあるため、文字のディセンダーをカットします。一般に、下線は下線よりも読みやすくなっていますが、タイポグラフィの伝統から逸脱しています。

次の例は、違いを示しています。

<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>

于 2015-02-07T13:45:21.260 に答える
4

インライン CSS を推奨しているわけではありませんが、ここでは簡潔にするためにインライン CSS を使用しています。

<h1 style="border-bottom: 5px solid black">
于 2010-06-28T18:00:02.783 に答える
0

border-bottom-width で同じ視覚効果を実現できる場合があります。

h2
{
  border-bottom-color:black;
  border-bottom-style:solid;
  border-bottom-width:15px;
}d
于 2010-06-28T18:00:02.877 に答える
0

常に border-bottom が必要なわけではないため (たとえば、アイテムにパディングがあり、遠くに表示される場合があります)、この方法が最適です。

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

太い下線が必要な場合は、さらに追加しますheight

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

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