今回は、liを使って横に配置する方法と、liを使って横に配置する際の注意点を紹介します。以下は実際的なケースです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>li水平排列</title>
<style>
html{
font-size: 20px;
}
@media only screen and (min-width: 320px){
html{font-size: 20px !important;}
}
@media only screen and (min-width: 350px){
html{font-size: 22.5px !important;}
}
@media only screen and (min-width: 365px){
html{font-size: 23px !important;}
}
@media only screen and (min-width: 375px){
html{font-size: 23.5px !important;}
}
@media only screen and (min-width: 390px){
html{font-size: 24.5px !important;}
}
@media only screen and (min-width: 400px){
html{font-size: 25px !important;}
}
@media only screen and (min-width: 428px){
html{font-size: 26.8px !important;}
}
@media only screen and (min-width: 432px){
html{font-size: 27.4px !important;}
}
@media only screen and (min-width: 481px){
html{font-size: 30px !important;}
}
@media only screen and (min-width: 569px){
html{font-size: 35px !important;}
}
@media only screen and (min-width: 569px){
html{font-size: 40px !important;}
}
body{
margin: 0;
padding: 0;
}
ul{
width: 100%;
margin: 0.3rem 0;
padding:0.3rem 0;
border-top:0.05rem solid #ccc;
border-bottom: 0.05rem solid #ccc;
}
li{
width: 33%;
list-style-type: none;
display:inline-block;
font-size: 0.8rem;
border-left: 0.05rem solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>
</body>
</html>
li の幅を 33% に設定すると、li タグの幅が実際には 1 行を超えてしまうという問題があります。
1. Floating
最初に思い浮かぶのは、Floating です。li に float:left スタイルを追加します。
このようにすると、浮動に関する問題が発生します。つまり、li の浮動により ul の高さが 0 になります。この問題を解決するには、次の 3 つの方法があります。
1. ULの高さを上げますが、これは適応できません。
2. フローティングの影響を理解するには、最後の li タグの後に空の p を追加します。
(個人的には推奨ですが、コードのメンテナンスはあまり良くないと思います)。
3. UL にズーム属性を追加します。これは IE にのみ適しているようです (調べていません)。
2. li タグを 1 行で記述します
なぜこれが普通なのか不思議で、とりあえずは理解するのが難しいです。
3. li タグ間の空白を削除するスタイルを ul に追加します。
li タグ間の空白を削除するには、ul に font-size:0 スタイルを追加します。注意すべき点は、li タグのフォント サイズをリセットする必要があることです。
この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
JavaScriptのDate Formatメソッドの使用方法
Zeptoタップイベントのペネトレーションとポイントペネトレーションの使用方法(コード付き)
以上がliを使って横に並べる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
