Question

ul和li组成的行列排布时,行与行之间会连在一起，怎么才能使他们行与行之间分开。 如图片上鲜花，蛋糕，礼

ul和li组成的行列排布时,行与行之间会连在一起，怎么才能使他们行与行之间分开（上下并列）。 如图片上鲜花，蛋糕，礼品。。。各在一行，每行有5张图片，下面是我的css请我该怎么修改，谢谢
ul{ list-style: none; margin-left: 0px;}
ul li{ height: 130px; width: 100px; float: left; margin: 10px; padding:10px; text-align: center;}
页面套用格式：
鲜花：<ul class="product-list">
@foreach (var product in ViewBag.Flowers as IEnumerable<Product>)
{
<li><a href="@Url.Action("Details", "Store",
new { id=product.ProductID})">
<img alt="@product.Name" src="@product.HomePhoto" />
<span>@product.Name</span></a></li>
}
</ul>

蛋糕：<ul class="product-list">
@foreach (var product in ViewBag.Cakes as IEnumerable<Product>)
{
<li><a href="@Url.Action("Details", "Store",
new { id=product.ProductID})">
<img alt="@product.Name" src="@product.HomePhoto" />
<span>@product.Name</span></a></li>
}
</ul>

Answer 1

用owollkoll说的clear，

或者你给这一块的大div加上个

{ width: 500px; hight: auto; overflow: hidden; border: none;}

Answer 2

给ul.product-list设定宽度， 然后float:left;即可

Answer 3

ul
{
clear:left;
list-style: none;
margin-left: 0px;
}

ul 里加上 一个清除 左悬浮 就可以了

Answer 4

是不是你的HTML套用的时候有问题啊~ 不行的话 你设置下，你UL的宽度 试试~~~