HTMLで縦の分割線を設定するにはどうすればよいですか? HTMLの縦分割線のコード説明-htmlチュートリアル-php.cn

HTMLで縦の分割線を設定するにはどうすればよいですか? HTMLの縦分割線のコード説明

不言

リリース： 2018-10-31 14:14:05

オリジナル

27873 人が閲覧しました

HTML の水平分割線は

タグを使用するだけで簡単に実装できることはわかっています。では、HTML の垂直分割線を実装するにはどうすればよいでしょうか。この記事ではHTMLに縦の分割線を実装する方法を紹介します。

PS: HTML の水平分割線の実装方法については、次の記事を参照してください。「HTML の水平分割線を設定するには?」 HTMLの水平分割線のコード例解説>>

HTMLの垂直分割線の実装方法の紹介にいきましょう

垂直分割線を直接実装する方法はありませんhtml では、垂直分割線を実現するには他の方法を使用する必要があります。どのような方法で垂直分割線の効果を実現できるかを見てみましょう。

最初の垂直分割線の実装方法:キーボードでダッシュ文字

を使用します。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<span>内容</span>|<span>内容</span>
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。

HTMLで縦の分割線を設定するにはどうすればよいですか? HTMLの縦分割線のコード説明

説明: これこの方法は簡単で便利ですが、十分に制御することができません。

垂直分割線を実装する 2 番目の方法: 境界線を使用して垂直分割線を実現します

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:200px;float:left;height:200px;">内容区域</div>
<div style="border:1px solid ;float:left;height:200px;"></div><!--这个div模拟垂直分割线-->
<div style="width:200px;float:left;height:200px;">内容区域</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。

HTMLで縦の分割線を設定するにはどうすればよいですか? HTMLの縦分割線のコード説明

垂直分割線を実装する 3 番目の方法: ボーダーとパディングを使用する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1{
padding:12px 6px 200px 6px;
margin-left: 6px;
border-left: 1px solid;
font-size: 0;
}
</style>
</head>
<body>
<div>
<span>内容区域</span>
<span class="span1"></span>
<span>内容区域</span>
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。

HTMLで縦の分割線を設定するにはどうすればよいですか? HTMLの縦分割線のコード説明

注: ここで使用されるパディングは主に垂直線の高さを制御するために使用されます。

垂直分割線を実装する 4 番目の方法: 背景画像を使用して垂直分割線を実装します

この方法では、異なる色や異なる種類の分割を自由に選択できます。ただし、画像のサイズ、特に幅を調整すると、エッジがある程度ギザギザになってしまいます。また、画像の色を調整するには、画像を別の画像に変更する必要があり、これは不便です。後の調整。なので、これ以上は言いませんが、興味のある方はぜひ試してみてください。

この記事はここで終わります。さらに興味深い内容については、php 中国語 Web サイト html チュートリアルをご覧ください。！！

以上がHTMLで縦の分割線を設定するにはどうすればよいですか? HTMLの縦分割線のコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。