HTML_CSS求助
CSS.pagination{
width: 850px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 20px 0 0 0 ;
background: #fff;
position: relative;
}
.pagination ul{
display: block;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.pagination ul li{
float: left;
margin-right: 10px;
border: 1px solid #ddd;
display: block;
width: 40px;
height: 40px;
}
.pagination ul li a{
color:#337AB7;
display: block;
}
.pagination ul li:first-child{
width: 60px;
}
.pagination ul li:last-child{
width: 60px;
}
.pagination .active{
border: 1px solid #ff0000;
}
.pagination .active a{
color: #ff0000;
}
HTML
<div class="pagination">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
求助：怎么让不设ul宽度的情况下，让ul随着li的宽度而变宽，而不是换行。并且保证绝对居中，求大神指点一下！
要不就把li的display设为行内元素或者行内块，ul宽度设满 再加上 text-align: center; white-space: nowrap;。
要不就把ul的display设为flex，然后用flex做居中。(也要设满宽度)。
要不就把ul和li都设为行内块，li会把ul撑大，然后在ul的父元素里加上text-align: center; white-space: nowrap;这其实和第一种方法没啥两样
要不就用js获取li再计算ul的宽度目标值，但是这样效率很低下。
页:
[1]