你的位置:首页 > 软件开发 > 网页设计 > 不固定宽度的盒子的水平居中

不固定宽度的盒子的水平居中

发布时间:2017-08-12 00:00:14
可用于制作分页标签. 如:方法一: display: table-cell;ul{ list-style: none; display:table; margin: 40px auto;}li{ display:table-cell;}方法二: 定位div ...

可用于制作分页标签. 如:

不固定宽度的盒子的水平居中

方法一: display: table-cell;

ul{    list-style: none;    display:table;    margin: 40px auto;}li{    display:table-cell;}

方法二: 定位

div{   float: left;   position: relative;   left: 50%;}ul{   list-style: none;   position: relative;   left: -50%;}li{   width: 20px;   height: 20px;   border: 1px solid gray;   float: left;}

示例代码如下:

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    *{      margin: 0;      padding: 0;    }    #container{      border:1px solid red;    }    ul{      list-style: none;      display:table;      margin: 40px auto;    }    li{      display:table-cell;    }    li a{      background-color: #ddd;      text-decoration: none;      padding:5px 8px;    }    .cl{      clear:both;    }  </style></head><body><div id="container">  <ul>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li>  </ul>  <div ></div>  <ul>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>  </ul>  <div ></div>  <ul>    <li><a href="#">1</a></li>  </ul></div></body></html>

  

  

原标题:不固定宽度的盒子的水平居中

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录