这里是普通文章模块栏目内容页
ul内容自适应居中
要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。
具体示例:

HTML代码

  •  
  •  
  •  
CSS样例
.clearfix:after{
    content:'';
    visibility:hidden;
    font-size:0;
    height:0;
    display:block;
    clear:both;
}

.container{
    width:100%;
    text-align:center;          
}
 
ul{
    display:inline-block;  
}
 
li{
     float:left;
     width:20px;
     height:20px;
     margin:0 20px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     cursor:pointer;
}
 
a{
    display:block;
    background-color:#000;
}

实现思想是,先让ul定义 display:inline-block 属性,让其变成行内块级元素。 当ul成为行内块级元素后,它便有了行级元素的特性。 那么,重点来了。 只需要对ul的父级元素定义一个text-align:center; 效果便可以很明显的看到了。 更重点是,ul内的li的增减并不会对其位置造成偏移。

栏目索引
相关内容