排成一行的li之间的间隙问题
2024-09-08 10:13:17
现象
对于ul下li排成一行的布局(即li的display由list-item设为inline-block):
情况1
如果这些li在书写的时候有换行或者有空格,且ul本身的font-size不为0,那么li左右之间会有空隙:
<ul>
<li>xxx</li>
<li>xxx</li>
</ul>
或
<ul>
<li>xxx</li> <li>xxx<li>
<ul>
情况2
如果li书写的时候不换行也无空格,那么li左右之间空隙消失
<ul>
<li>xxx</li><li>xxx</li>
</ul>
情况3
如果ul的font-size设为0,那么无论li换不换行,空隙都会消失
结论
ul的font-size会控制li之间的空格大小。只有将ul的font-size设为0, 换行着写的li之间才不会有空格。
对策
考虑到代码可读性,还是选择正常方式换行写li。
然后为了精确控制li之间的间距,应该将ul的font-size设为0,然后为li设置marge,如margin:0 2.5px。
最新文章
- python爬虫学习(4) —— 手刃「URP教务系统」
- 6.nodejs权威指南--进程
- Echarts 地图控件tooltip多行显示
- MongoDB 学习笔记(三)—— 修改器的使用
- SQL Server2005中使用XML-数据类型、查询与修改
- bzoj 2285 [Sdoi2011]保密(二分,spfa + 最大流)
- libthrift0.9.0解析(一)之TServer
- Vue练手项目(包含typescript版本)
- sql的having深入理解;group by只返回一组的一行,compute更好
- [Python学习之路] 猜大小游戏
- 控制结构(1): 分枝/叶子(branch/leaf)
- mini2440串口使用
- AOJ 0009 Prime Number
- C#——LINQ语句
- spring initializr 创建项目时,依赖对应的 artifactId
- azkaban编译安装配置文档
- hudson插件说明
- Autowire
- fwrite与fread
- python中装饰器的原理以及实现,