[已解决]HTML_CSS求助

y863886220

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的宽度而变宽，而不是换行。并且保证绝对居中，求大神指点一下！

最佳答案

月排行榜 / 总排行榜

Darth_EF

2021-3-17 19:43:44

要不就把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的宽度目标值，但是这样效率很低下。

跳转到最佳答案楼层

Darth_EF

要不就把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的宽度目标值，但是这样效率很低下。