float横並びにしたブロックの中のul/liを縦並びにさせたい

質問

float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。

（html）
<div class="base">
<div class="box1">
<a href="#"><img src="#" alt=""></a>
</div>
<div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div>
<div class="box3">
<ul class="list-y">
<li>ああああ</li>
<li>いいいい</li>
<li>うううう</li>
<li>ええええ</li>
<li>おおおお<a href="#">かかか</a></li>
</ul>
</div>
</div>

（css）
ul{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
display: block;
}

li {
margin: 0;
padding: 0;
display: inline;
}

.base {
width: 618px;
height: 100px;
margin: 0;
padding: 8px 10px 0 10px;
text-align: left;
line-height: 1.5em;
background-image: url(../images/content_bg.gif);
background-repeat: repeat-y;
}

.base .box1 {
width: 130px;
height: 97px;
margin: 0;
padding: 0;
float: left;
outline: solid 2px black;
}

.base .box2 {
width: 2px;
height: 100px;
margin: 0 5px 0 10px;
padding: 0;
float: left;
border-right: dotted 2px #ccc;
}

.base .box3 {
margin-left: 157px;
padding: 0;
font-weight: bold;
text-align: left;
}

.list-y{
clear: both;
}

CSSに疎いのでよろしくお願いいたします。

回答No.1

Yama-tani · ベストアンサー

liの中の
display: inline;
を削る

お礼

ありがとうございました！助かりました。