ホームページ  >  記事  >  ウェブフロントエンド  >  liをCSSでラップしないように強制する方法

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

青灯夜游
青灯夜游オリジナル
2021-04-02 12:44:346621ブラウズ

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

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

このチュートリアルの動作環境: 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をCSSでラップしないように強制する方法

では、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默认产生”点“ */
}

レンダリング:

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

# 説明:

インライン要素の特性:

    # 幅と高さの設定は無効です
  • マージンの設定は上下方向ではなく左右方向のみ有効です。パディングの設定は上下方向の両方で有効です。 、左右方向にスペースを拡張します
  • #自動行折り返しなし
  • ##インライン ブロック要素の特徴:

自動行折り返しなし

  • 幅と高さを識別できる

  • #デフォルトの配置は左から右
  • #(学習ビデオ共有:
  • css ビデオ チュートリアル
  • )

    ##方法 2: float 属性を使用する

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

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

説明:

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

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

liをCSSでラップしないように強制する方法Floating を使用すると、Floating 属性が設定された要素が標準の通常のフローの制御から逃れ、親要素内の指定された位置に移動できます。

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

プログラミング ビデオ

をご覧ください。 !

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。