ホームページ > ウェブフロントエンド > htmlチュートリアル > どのようなタグが使用できますか? 自動的に1行が埋まっています。

どのようなタグが使用できますか? 自動的に1行が埋まっています。

WBOY
リリース: 2016-06-24 11:52:17
オリジナル
1514 人が閲覧しました

たとえば、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:left をすべての li に追加するだけです。



次に、float を使用して、すべての li に float:left; を直接追加します。

試してみたところ、この機能は実装されているのですが、全体がごちゃごちゃしていて、不均一で、長さもバラバラです

全体をもっと綺麗にする方法はありますか?


そうですね、これはあなたのレイアウトスキル次第です

たとえば、多くの li 要素が同じ幅に設定され、複数の li 要素がほぼ 1 行を占めるようになり、コンテンツが中央 (または左) に配置されます。
見栄えをよくしたい場合は、ゆっくりとスタイルを変更してうまくレイアウトする必要があります。さあ~~


一般的に、js を使用して制御する方が簡単です。 。 。


一般的には js を使用した方が制御が簡単です。 。 。

それを制御するにはどうすればよいですか? li の内容の長さを計算しますか?

そうですね、これはあなたのレイアウトスキル次第です

たとえば、複数の li 要素がほぼ 1 行を占めるように、多くの li 要素が同じ幅に設定され、コンテンツが中央 (または左) に配置されます。の方がいいです。

もっと良く見せたいなら、スタイルをゆっくり変えて、うまくレイアウトしなければなりません、さあ~~




千行の涙! ! ! ! !

jsで長さを計算するのは面倒なので固定長で書けば大丈夫です。

このようにレイアウトしたので、li コンテンツの長さはほぼ同じになるはずです
長さの差が大きすぎる場合は、1 行に 1 つずつ使用するのが最も見栄えの良いスタイルです。 1行に1つであればfloatを追加する必要はありません


直接表示するだけです。


jsで長さを計算するのは面倒なので固定長を書くだけで済みます。

このようにレイアウトしたので、li コンテンツの長さはほぼ同じになるはずです

長さの差が大きすぎる場合は、1 行に 1 つずつ使用するのが最も見栄えの良いスタイルです。 1行に1つであればfloatを追加する必要はありません


直接表示するだけです。


今人気のミックスアンドマッチ ~~~~

ul li タグは、ul の幅を固定値に設定し、li の幅と高さを固定値に設定し、float 属性を追加するのに特に適しています。 li タグの幅が ul を超えると、自動的に次の行に切り替わります。li タグのスタイルをより美しくすることを忘れないでください


長かったり短かったりすると、どのように見えるか想像するのは難しいです。
言っておきますが、float を使用すると、どのように見栄えが良くなるかについては、ゆっくり勉強してください。

ul li ラベルは、ul の幅を固定値に設定し、li の幅と高さを固定値に設定します。幅が ul を超える場合は、li ラベルに float 属性を追加します。ラベルのスタイルがより美しくなります


余分な幅を省略しましたが、(/□□)

が自動的に次の行に移動されます。これも分かりません

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート