HTMLで下線の長さを設定する方法-htmlチュートリアル-php.cn

HTMLで下線の長さを設定する方法

青灯夜游

リリース： 2021-12-13 16:33:06

オリジナル

11768 人が閲覧しました

html下線の長さを設定する方法: 1. 「display: block;」スタイルを要素に追加して、要素をブロックレベルの要素に変換します; 2. border-bottom 属性を使用して下線のスタイルを設定します; 3. width 属性を使用して、下線の長さを制御します (構文「幅: 長さの値;」)。

HTMLで下線の長さを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

html下線の長さを設定する方法

HTML では、border-bottom 属性を使用して下線のスタイルを設定し、width 属性を使用して下線を制御できます。長さ。

ネストとは、要素の幅が制御可能でなければならないことを意味します。width 属性が使用されている場合でも、それは有効でなければなりません。

つまり、要素はブロックレベル要素 (display: block;) またはインラインブロックレベル要素 (display: inline-block;) である必要があります。

実装コード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>

			a{
				text-decoration: none;
			}
			.box{
				display: block;
				border-bottom:2px solid grey;
				width:200px;
			}
		</style>
	</head>
	<body>
		<a href="#" class="box">About</a><br>
		<span class="box">Technology</span>
	</body>
</html>

ログイン後にコピー

HTMLで下線の長さを設定する方法