お好み焼きkomugi様
バタバタと忙しくドリンクメニューのところがIEでキレイに表示されないところがなかなか変更できませんでした
今日やっと変更しました
忙しい中考えた内容が
前回まではドリンクメニューの中を左と右に分けてその中を左と右に分けて合計4等分にしてましたが、IEでは中の中のfloatがちゃんと表示されませんでした
今回はメニューを左からひとつのまとまりとしてliでくくり、4つのliにしました
liは150ピクセルfloat左に設定しました
html内容(ドリンクメニュー)
<div class="drink">
<div class="drink_waku">
<ul>
<li>
<div class="top">麦焼酎</div>
<div class="name">天の刻印</div>
<div class="name">酔麦香</div>
<div class="top">黒糖焼酎</div>
<div class="name">れんと</div>
<div class="top">芋焼酎</div>
<div class="name">黒霧島</div>
<div class="name">亀五郎</div>
<div class="name">純 黒</div>
</li>
<li>
<div class="top"> </div>
<div class="space_drink">------------ 450円</div>
<div class="space_drink">------------ 480円</div>
<div class="top"> </div>
<div class="space_drink">------------ 480円</div>
<div class="top"> </div>
<div class="space_drink">------------ 450円</div>
<div class="space_drink">------------ 500円</div>
<div class="space_drink">------------ 480円</div>
</li>
<li>
<div class="top"></div>
<div class="keep">ボトルキープ</div>
<div class="keep">ボトルキープ</div>
<div class="top"></div>
<div class="keep">ボトルキープ</div>
<div class="top"></div>
<div class="keep">ボトルキープ</div>
<div class="keep">ボトルキープ</div>
<div class="keep">ボトルキープ</div>
</li>
<li>
<div class="top"></div>
<div class="space_drink">------------ 3000円</div>
<div class="space_drink">------------ 3000円</div>
<div class="top"></div>
<div class="space_drink">------------ 3000円</div>
<div class="top"></div>
<div class="space_drink">------------ 3000円</div>
<div class="space_drink">------------ 3000円</div>
<div class="space_drink">------------ 4000円</div>
</li>
</ul>
<div class="clearfix"></div>
<div class="top">数量限定おすすめ焼酎</div>
<div class="name">田伝夢詩(でんでんむし) ------------ 550円
赤霧島 ------------ 500円</div>
</div>
</div>
divでくくっているのが気になりますが今回はこれで行きます
たぶんspanでくくってもいいような気がしますが・・・。
CSS内容
.drink {
margin-right: auto;
margin-left: auto;
text-align: left;
border: 1px solid #FF3300;
list-style-type: none;
width: 700px;
}
.drink .drink_waku {
padding-top: 10px;
padding-bottom: 10px;
margin-right: auto;
margin-left: auto;
width: 600px;
}
drink_waku ul {
margin-right: auto;
margin-left: auto;
}
.drink li {
text-align: left;
display: inline;
float: left;
width: 150px;
}
.drink .top {
font-size: 18px;
font-weight: bold;
color: #000000;
letter-spacing: 10px;
line-height: 30px;
height: 30px;
}
.drink .space_drink {
height: 20px;
font-size: 16px;
line-height: 20px;
}
.drink .name {
color: #000000;
margin-left: 30px;
line-height: 20px;
height: 20px;
font-size: 16px;
}
.drink .keep {
font-size: 16px;
color: #0000FF;
line-height: 20px;
letter-spacing: 5px;
height: 20px;
}