たとえば、ul width 200px
最初の li 90px と 2 番目の li 100px 90+100
最初の li 110px と 2 番目の li 100px 110+100>200 の場合、2 番目の個人全体を2行目に変更します
そのような機能を実現する方法は、
他のタグも使用できます
1行に収まらない場合はフローティングでも大丈夫です。次の行に移動 ただし、インライン要素のタグも可能なようです。
liを使っているので、そのままfloatを使ってください
1行に収まらない場合は次の行に移動しても良いようですが、inline要素のラベルも使えるようです。
li を使用する場合は、 float を使用してください。
次に、float を使用して、すべての li に float:left; を直接追加します。
試してみたところ、この機能は実装されているのですが、全体がごちゃごちゃしていて、不均一で、長さもバラバラです
全体をもっと綺麗にする方法はありますか?
一般的に、js を使用して制御する方が簡単です。 。 。
一般的には js を使用した方が制御が簡単です。 。 。
それを制御するにはどうすればよいですか? li の内容の長さを計算しますか?
そうですね、これはあなたのレイアウトスキル次第です
もっと良く見せたいなら、スタイルをゆっくり変えて、うまくレイアウトしなければなりません、さあ~~
千行の涙! ! ! ! !
直接表示するだけです。
jsで長さを計算するのは面倒なので固定長を書くだけで済みます。
このようにレイアウトしたので、li コンテンツの長さはほぼ同じになるはずです
長さの差が大きすぎる場合は、1 行に 1 つずつ使用するのが最も見栄えの良いスタイルです。 1行に1つであればfloatを追加する必要はありません
直接表示するだけです。
今人気のミックスアンドマッチ ~~~~
ul li タグは、ul の幅を固定値に設定し、li の幅と高さを固定値に設定し、float 属性を追加するのに特に適しています。 li タグの幅が ul を超えると、自動的に次の行に切り替わります。li タグのスタイルをより美しくすることを忘れないでください
ul li ラベルは、ul の幅を固定値に設定し、li の幅と高さを固定値に設定します。幅が ul を超える場合は、li ラベルに float 属性を追加します。ラベルのスタイルがより美しくなります
が自動的に次の行に移動されます。これも分かりません