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

li を折り返さないように強制する Css メソッド: 1. 表示属性を使用して li 要素を inline 要素または inline block 要素に変換します。要素の前後に改行がない場合は、ラッピングができない。 2. float 属性を使用して li 要素に「float:left;」スタイルを追加し、li 要素をフローティングして並べて表示します。

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

li はデフォルトではブロック要素であり、常に新しい行で始まり、行全体を占めます。

<ul>
	<li>
		<a href="http://www.php.cn/">首页</a>
	</li>
	<li>
		<a href="http://www.php.cn/">关于我们</a>
	</li>
	<li>
		<a href="http://www.php.cn/">联系我们</a>
	</li>
</ul>

レンダリング:

では、li をラップしないように強制するにはどうすればよいでしょうか?以下で詳しく説明する、display 属性または float 属性を使用できます。

方法 1: 表示属性を使用する

li タグに「display:inline;」または「display:inline-block;」スタイルを設定し、 li タグをインライン要素またはインライン ブロック要素として使用すると、li タグの折り返しを防ぐことができます。

li {
	display: inline;
	/*display: inline-block;*/
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

レンダリング:

# 説明:

インライン要素の特性:

# 幅と高さの設定は無効です
マージンの設定は上下方向ではなく左右方向のみ有効です。パディングの設定は上下方向の両方で有効です。 、左右方向にスペースを拡張します

• #自動行折り返しなし
• ##インライン ブロック要素の特徴:

自動行折り返しなし

• 幅と高さを識別できる

#デフォルトの配置は左から右

• #(学習ビデオ共有:
css ビデオ チュートリアル
• )
  ##方法 2: float 属性を使用する

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

li {
	float: left;
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

レンダリング:

説明:

フローティングは、ページを変更できる非常に便利なレイアウト方法です。オブジェクト内のオブジェクトの逆方向フロー順序。これの利点は、コンテンツのレイアウトがシンプルになり、拡張性が高いことです。

フローティングは CSS レイアウトの非常に強力なレイアウト機能であり、CSS レイアウトを理解する上で重要な問題でもありますが、CSS では div を含むあらゆる要素をフローティング表示することができます。

Floating を使用すると、Floating 属性が設定された要素が標準の通常のフローの制御から逃れ、親要素内の指定された位置に移動できます。

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

プログラミング ビデオ

をご覧ください。 ！

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