CSS3技巧：fit-content水平居中
2017-10-16 00:00
127 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
<ul>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
</ul>
</div>
</body>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 1200px;
margin: 50px auto;
}
.box ul {
margin: auto;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.box ul li {
width: 100px;
margin: 0 auto;
float: left;
list-style-type: none;
}
</style>
</html>目前这个属性只支持Chrome和Firefox浏览器，下面是居中的代码:
width:-moz-fit-content;
width:-webkit-fit-content;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3技巧：fit-content水平居中
- CSS3属性：width:fit-content 水平居中
- CSS3中DIV水平垂直居中-2(3)
- 水平垂直居中div（css3）
- css3中div的水平，垂直居中
- CSS2/CSS3 垂直水平居中
- CSS实战技巧：块级元素水平垂直居中
- 使用css3将一个div水平和垂直居中显示
- 元素水平居中设置小技巧
- CSS3 Flex实现元素的水平居中和垂直居中
- css（css3）实现垂直水平居中的那些事
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中
- [css3]水平垂直居中
- css3 实现元素水平和垂直居中
- UL 居中fit-content
- CSS3 Flex实现元素的水平居中和垂直居中
- CSS3 position 垂直水平居中定位
- css3 让绝对定位元素水平居中的方法
- css3实现元素水平垂直居中
- [置顶] CSS3清除浮动 保持浮层水平垂直居中