无序列表排版

用无序列表排版的一些问题

1.在DIV套ul时如果DIV的样式没有设宽度，那ul中margin设置就无法生效。

* div的样式要设有宽度，内的ul样式margin才生效*/
<div style="width: 100px; background-color: #f00;">/
  <ul style="margin: 10px; background-color: #6cc;">
    <li>
       在DIV套ul时如果DIV的样式没有设宽度，那ul中margin设置就无法生效。
    </li>
  </ul>
</div>

 

2.在建表项(li)时，默认为垂直排列，但有时会继承上人样式,而使其为水平排列。
<ul>
 <il>1</il>
 <il>1</il>
<ul>

为使以垂直排列，应在il样式中添加显示为块(display: block;)。
<ul>
 <il>2</il>
 <il>2</il>
<ul>

il
{
 display: block;
}

 

3.在列表（ul,li）中使图片水平分布与垂直对齐
1.如果每次加载的图片大小不一，就要确定所有图片最高是多少。
2.定高：有两种方法。
　（1）是在ul中添加高度(height)属性，而值为把所有图片最高加上图片上下边界(margin)高度。还在li中添加图片上下边界(margin)高度。
　（2）适合所有高度都一样的图片。只在li中添加上下边界(margin)高度就可。
3.定宽：在li样式添加宽度,宽度的值是一行中图片数除ul总宽度所得到平均数。然后再添加一个文本水平对齐(text-align: center;)。

例：
.Recommendation_Gallery div
{
 width: 96%;
}

.Recommendation_Gallery ul
{
 border: #CCCCCC 1px solid;
 height: 117px;
 padding: 0px;
 margin: 0px;
}

.Recommendation_Gallery li
{
 padding: 0px;
 margin: 15px 0px;
 text-align: center;
 width: 33.2%;
 background-color: #7CC576;
}