※ ChatGPTを利用し、要約された質問です（原文：横並びリスト ブラウザ縮小 カラム落ち）
このQ&Aのポイント
ulとliで横並びの商品リストの様なものを作成していますが、ブラウザの縮小機能を使うとカラム落ちが発生します。
ulの幅を5つのliで等分するため、liの幅は142pxで指定していますが、borderを含めた幅が144pxになっているため、縮小するとカラム落ちが起こります。
liの幅を144pxにしてborderの指定を外すと、縮小してもカラム落ちは起こらなくなります。
よろしくお願いします。
ulとliで横並びの商品リストの様なものを作成していて、
ようやく完成したと思っていたのですが、
ブラウザの拡大/縮小機能を使って、
少しでも縮小するとカラム落ちが発生してしまいます・・・。
完成したと思っていたので焦っております(汗)
簡単にソースを記載しますので、
原因と対策がわかりましたら、どうか回答宜しくお願いします。
ul{
width:720px;
list-style:none;
}
li{
width:142px;
border:1px solid #000;
float: left;
}
このような感じで、ulには別にクラスを指定して、clearfixも指定しています。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
ulの全体720pxを5個のliで割って、144pxとなり、
そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、
間違っているのでしょうか？
liの幅を144pxにしてborderを指定しない場合は、
縮小してもカラム落ちは起こりません。
初歩的なことかもしれませんが、
どうぞよろしくお願いします。
