ul内容自适应居中_html_程序编码_思韵闪耀_一生受益

ul内容自适应居中

思韵闪耀

2018-01-26

0次

要实现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的增减并不会对其位置造成偏移。

【版权声明】
本站部分内容来源于互联网，本站不拥有所有权，不承担相关法律责任。如果发现本站有侵权的内容，欢迎发送邮件至masing@13sy.com 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

上一篇：ASP+MYSQL和ASP+ACCESS哪个好

下一篇： javascript脚本代码的位置

相关内容

热门资讯

Invalid left-ha... 写一个提交函数的时候，发现函数不生效，F12之后看到Invalid left-hand side i...

响应图片(Responsive... 一、开门见山响应图片技术可以说是响应布局衍生出来的一个小分支。说白了，就是不同显示器宽度下调用不同...

轻松删除MetInfo CMS... 第一步：首页底部版权，模板文件foot直接删除；第二部：首页头部generator版权，\publ...

ckplayer6.3如何替换... 1.刚打开播放器，视频在缓冲时播放器中间的LOGO怎么替换？(如下图) 2.视频播放器右上角的CK ...

inDensity，inTar... 如果接触Android中的Bitmap较深的话，肯定会知道标题上的这三个属性值，那么这三个属性值的关...

JS 验证利用Javascript中每个对象(Object)的prototype属性我们可以为Javascri...

检测大写锁定键(Caps Lo... h1检测大写锁定键/h1form action="#" method="post" p label ...

在文本框中输入时保证总是在最... 那就要在keypress时保证文本框的光标在尾部，而文本框value赋值后其光标默认在最后，故可采用...

微信UA Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5...

iframe高度自适应,全屏,... !注意此方法用于同一个域名下,可能需要部署在服务器上才能看出效果 !DOCTYPE html PUB...