![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
よろしくお願いします。
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を指定しない場合は、
縮小してもカラム落ちは起こりません。
初歩的なことかもしれませんが、
どうぞよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
Firefoxで一番下のstickyが上に...
-
css初心者 フレックスボックス...
-
HTMLで一部だけスクロールする...
-
z-indexで上になっている要素だ...
-
CSSで指定した背景画像にリンク...
-
書籍を見つつサイト造りの練習...
-
CSSと<dl><dd>で間隔をあけて1...
-
footer を横幅いっぱいに広げる...
-
余分な縦スクロールバーが出て...
-
画像イメージの上下左右、欲し...
-
chromeのcss位置ズレについて
-
div枠のレイアウトが崩れてしま...
-
CSS(0の単位)について
-
CSSがなぜかfont-sizeだけ効か...
-
横に並んだ画像の固まりをセンター
-
CSS:animation開始位置の設定
-
Flexslider2のカーセルスライダ...
-
HTMLのiframeの入れ子について
-
CSS上での計算を行うためのルー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報