ul の li が CSS でラップされないようにする方法-CSSチュートリアル-php.cn

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

WBOY

リリース： 2021-11-18 11:59:47

オリジナル

3449 人が閲覧しました

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 でラップされないようにする方法