ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで2単語と3単語の配置を設定する方法
CSSで2単語と3単語の配置を設定する方法
- 青灯夜游オリジナル
- 2021-03-09 14:55:148749ブラウズ
CSS では、text-align 属性を使用して 2 つの単語と 3 つの単語を揃えることができ、text 要素に「text-align: justify;」スタイルを設定するだけで、テキストの配置を実現できます。 3つの単語と2つの単語を並べる効果。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css の 2 単語と 3 単語の配置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
width: 70px;
height: 40px;
line-height: 40px;
background: paleturquoise;
text-align: justify;
}
p > span {
display: inline-block /* Opera */;
padding-left: 100%;
}
</style>
</head>
<body>
<p>你好<span></span></p>
<p>大家好<span></span></p>
<p>同学们好<span></span></p>
</body>
</html>レンダリング:
手順 ：
CSS では、text-align の属性値は justify で、これは位置揃えを意味します。達成される効果は、テキスト行を両端に揃えて表示できることです (テキストの内容は 1 行を超える必要があります)。
しかし、これを使用するだけではまだ役に立ちません...
テキストの両端を揃えるには、 、 タグ
を使用することをお勧めするチュートリアルは次のとおりです: CSS ビデオ チュートリアル 、html ビデオ チュートリアル
以上がCSSで2単語と3単語の配置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでハイパーリンクの色を変更する方法次の記事：CSSでハイパーリンクの色を変更する方法