鱼C论坛

 找回密码
 立即注册
查看: 6609|回复: 1

[已解决]HTML_CSS求助

[复制链接]
发表于 2021-3-17 19:43:43 | 显示全部楼层 |阅读模式
30鱼币
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>
分页.png

求助:怎么让不设ul宽度的情况下,让ul随着li的宽度而变宽,而不是换行。并且保证绝对居中,求大神指点一下!
最佳答案
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的宽度目标值,但是这样效率很低下。

最佳答案

查看完整内容

要不就把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的宽度目标值,但是这样效率很低下。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 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的宽度目标值,但是这样效率很低下。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 19:32

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表