ホームページ > ウェブフロントエンド > htmlチュートリアル > Wrap_html/css_WEB-ITnose を使用せずに ul の li 要素を水平方向に配置する方法

Wrap_html/css_WEB-ITnose を使用せずに ul の li 要素を水平方向に配置する方法

WBOY
リリース: 2016-06-21 09:27:37
オリジナル
2287 人が閲覧しました

状況は上の図のとおりです。
外側の div コンテナの幅は固定されており、li (li の幅は固定) が増加するにつれて ul の幅も広がります。ただし、内部の li の幅の合計が大きくなると、 ul は div より大きく、ul は展開されませんが、li は新しい行に分割されます。li が新しい行に分割されないようにするにはどうすればよいですか?
ul スタイルは次のとおりです:
#pic_list
{
white-space: nowrap;
}
li スタイルは次のとおりです:
#pic_list li
{
width:80px; ;
margin:3px;
garden:red;
}
追加の説明: ul の幅を div コンテナーの幅より大きい値に設定した場合でも、それでも div コンテナの端の前で折り返されます。
調べてみると、w3cschool の情報には、「フローティング ボックスは、その外縁が含まれるボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動する可能性があります。」と説明されています。 ul のフレームには触れませんが、ul の親コンテナ div のフレームには触れますが、それでもラップされます。



ディスカッションに返信 (解決策)

float:left; を削除して display:inline-block; に変更します

float:left; を削除して、次のように変更します

display :inline-block ;


ご回答ありがとうございます、効果は非常に満足です。

スクロール効果を実現するにはどうすればよいですか? インターネットでいくつか読んだのですが、画像をスクロールするときに、左の属性を変更します。 add ul 内の写真が 1 つも表示されません。 。 。

絶対値を設定してから左に変更するのではなく、どうすればよいかわかりませんか?


float:left;
を削除して、
display:inline-block; に変更します



長い間問題を探していましたが、ついに解決しました、ありがとう。

どうやって解決しましたか?

まだ機能しないのはなぜですか?

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