ul の li が CSS でラップされないようにする方法

WBOY
リリース: 2021-11-18 11:59:47
オリジナル
3427 人が閲覧しました

ul の li を CSS でラップしないようにする方法: 1. float 属性を使用して、「{float:left;}」スタイルを li 要素に追加するだけです。 2. display 属性を使用すると、li 要素に「{display:inline;}」スタイルを追加するだけで済みます。

ul の li が CSS でラップされないようにする方法

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

CSS で ul の li をラップしないようにする方法

この記事では、CSS で ul li を強制的にラップしないようにする方法を説明します。 CSS を使用して ul li を強制的にラップしないようにする方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1. li 要素を改行せずに並べて表示するには、float スタイルを使用します。

CSS では、float 属性を使用して li 要素を浮動表示して表示できますそれらを並べて。フローティングは、文書の流れから要素を取り出し、それを左右に移動し、その周囲に要素を再配置する方法です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注释:加list-style:none去掉li默认产生”点“ */
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>
ログイン後にコピー

レンダリング:

ul の li が CSS でラップされないようにする方法

#2. ディスプレイを使用して li を改行せずに並べて表示します

display 属性は、要素が生成するボックスのタイプを指定します。

表示属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため、危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。

インライン: デフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。

display:inline を使用して、要素の前後に改行を入れずに li 要素をインライン要素として表示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
display:inline
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>
ログイン後にコピー
レンダリング:

ul の li が CSS でラップされないようにする方法

プログラミング関連の知識の詳細については、

プログラミング ビデオをご覧ください。 !

以上がul の li が CSS でラップされないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート