ホームページ > 記事 > ウェブフロントエンド > 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默认产生”点“ */ }
レンダリング:
float 属性を使用して li 要素をフローティングし、並べて表示します。フローティングは、文書の流れから要素を取り出し、それを左右に移動し、その周囲に要素を再配置する方法です。 li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注释:加list-style:none去掉li默认产生”点“ */
}
レンダリング:
説明:
フローティングは、ページを変更できる非常に便利なレイアウト方法です。オブジェクト内のオブジェクトの逆方向フロー順序。これの利点は、コンテンツのレイアウトがシンプルになり、拡張性が高いことです。
Floating を使用すると、Floating 属性が設定された要素が標準の通常のフローの制御から逃れ、親要素内の指定された位置に移動できます。
プログラミング関連の知識について詳しくは、
プログラミング ビデオをご覧ください。 !
以上がliをCSSでラップしないように強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。