css常见布局问题

1.在网站布局中，很多时候，子元素中使用行内元素如 span或块元素li标签且标签个数不定，而我们又想让这一块不管个数有多少个(子元素的总体宽度不定)，始终都能居中显示。

html样式标准：      <div class="main">
                                    <div>1</div>
                                     <div>2</div>
                                     <div>3</div>
                                     <div>1</div>
                                    <div>2</div>
                                    <div>3</div>
                                   <div>1</div>
                                   <div>2</div>
                                  <div>3</div>
                               </div>

css标准：            .main{
                                    text-align: center;
                                      }
                             .main div{
                                      line-height: 100px;
                                     width: 100px;
                                     height: 100px;
                                     background-color: red;
                                    display: inline-block;
                                  *display: inline;
                                   *zoom: 1;
                                   }

说明：

使用display:inline-block属性，可以使行内元素或块元素能够不加float属性就可以定义自身的宽、高，同时又能使该元素在父元素居中显示。

在内联元素上定义display:inline-block属性，发现IE6、IE7中的显示效果同其它浏览器一致，但事实是ie7及更低版本的ie浏览器不支持display:inline-block这个属性。 

在IE下，display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上，只能保证这个div拥有块元素的特征（可以设置宽度，高度等），但还是会产生换行。接下来要设置 display: inline，使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上，inline- block属性是不会触发元素的layout的，因此我们还要额外加上 *zoom:1来触发layout。

2.当li或者其他标签里面的内容超过了标签本身的长度是，可以使用省略号的属性：text-overflow: ellipsis;