[笔记]ul>li>a做分布时, 让其居中显示效果
2024-09-01 18:44:31
结构:
<div id="page">
<ul>
<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="#">末页</a></li>
</ul>
</div>
css语法:
ul{text-align: center;}
ul li{display: inline;margin-right: 6px;}
ul li a{display: inline-block;padding: 4px 10px;font-size: 12px;border: 1px solid #E9E9E9;}
关键说明:
1 li的display必须为inline, 这样, 有两个好处, 一个是不用float:left, li就可以是一行显示, 另外发现一个问题, 如果display为inline-block时, chrome和火狐的没问题, 但在IE内核上运行, 一个li就独占一行, 除非设置width, 再加float:left; 但这样又会引发另外一个问题, 就是ul整体的居中, 一个是clear:both; 再就是给ul设置width, 再margin: 0px auto; 但在ul开始时宽度不明确时, 固定了宽度, 当后期页数太多, 或li页码字符太多了, 把整个ul撑开了, 页码就会变成双行显示, 没法自适应, 用上面的方法, 只要div#page的宽度足够, 就不会出现双行显示的问题.
最新文章
- c++中的指针
- [LintCode] Number of Islands 岛屿的数量
- 线段树 Codeforces Round #197 (Div. 2) D. Xenia and Bit Operations
- Hadoop使用lzo压缩格式
- 第三百四十二天 how can I 坚持
- 随机数生成类Random用法
- chapter 14_1 环境
- VS2010环境下使用VB编写串口助手
- VMware workstation安装报Microsoft Runtime DLL和Intel VT-x错误
- VR全景加盟-了解VR就来全景智慧城市
- 三、编辑 Update set
- vue性能
- 以慕课网日志分析为例-进入大数据Spark SQL的世界
- Flutter之Color
- 大话npm,cnpm和yarn
- MySQL 分支和循环结构
- kubernetes ui 搭建
- 【LOJ】#2114. 「HNOI2015」菜肴制作
- SpringBoot系列十二:SpringBoot整合 Shiro
- NutzWk 5.0.x 微服务分布式版本开发及部署说明