外层div宽度固定，而内层div宽度有变化，css怎样使一个使内层div水平居中，css实现分页效果及分页居中问题解决

最新推荐文章于 2022-05-25 21:38:32 发布

魏翼超然

最新推荐文章于 2022-05-25 21:38:32 发布

阅读量1.2k

点赞数 1

分类专栏： web前端经验文章标签：不固定div的宽度怎么把一个div居中 css怎样使分页效果居中外层div宽度固定但内层div宽度不固定 css实现分页效果设计怎样使浮动li水平居中

本文链接：https://blog.csdn.net/zw200813ht/article/details/11903631

版权

web前端经验专栏收录该内容

4 篇文章 0 订阅

订阅专栏

刚刚做一个分页效果，分页用UI li做的，ul外层宽度固定了，因为分页是变化的，可能多可能少，所以不能固定ul的宽度，而且li用了float:left；。这样就用 margin:0 auto;就不能让分页居中了这问题让我纠结了好久，最后解决了，分享给大家，但分页功能还不够完善希望大神吐槽指点下

用float:left后效果图

css实现分页效果及分页居中问题解决方案

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { margin: 0; padding: 0;}
.page { width:960px; height:30px; margin:10px auto; padding:10px 0px; text-align: center; white-space: nowrap; background:#000; color:#fff}
.page li { margin: 0 5px; list-style-type:none  }
.page li a { float:left; height: 30px; line-height: 30px; width: 30px; text-align: center; border:1px solid #d4d4d4; color:#000; background:#fff; text-decoration:none}
.page li a:hover{ background:#C00}
</style>
</head>

<body>
<ul class="page">
  <li><a href=""><</a></li>
  <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>
  <li><a href="">6</a></li>
  <li><a href="">7</a></li>
  <li><a href="">></a></li>
</ul>
</body>
</html>

解决方法：

删除float:left;在li标签样式内添加display:inline;

在a标签样式内添加display: table-cell; display: inline-block;