状況は上の図のとおりです。
外側の 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; に変更します
長い間問題を探していましたが、ついに解決しました、ありがとう。
どうやって解決しましたか?
まだ機能しないのはなぜですか?