标签li设为display inline-block后间距问题
2024-09-28 13:14:51
在对导航栏做水平排列的时候,我们往往对li元素设为display:inline-block
目的是为了,让所有li元素并排在一起,但是遇到个问题,我们的标签之间会产生空白边距
如图所示:
这样看上去,原本可以紧凑排列的,多出了这么些空白边距,我们有时候处理的方法是:
对于每个li元素设置为float:left,这样做虽然能够消除空白边距,但是其父元素ul的高度就无法自适应,举个例子,每个元素li的高度为30px,但是这样做了之后,ul的高度仍为0,就算清除了浮动,
所以,最好的办法,就是给每个元素li,显示为inline-block,即行内元素,但是这个边距如何去除呢?
方法如下:
我们只需要在父元素ul上面设置,font-size:0px ,这样空白边距就消失了,
看一下效果图:
这样就很好看了,还有一种方法,就是在每一对li元素之间不要有换行,即在我们大代码里面,把换行放在li元素内部,如下:
<ul>
` <li>a
</li><li>b
</li><li>b
</li><li>b
</li>
</ul>
这样也是能够消除换行带来的空白边距的哦~~~
最新文章
- 通过form表单的形式下载文件。
- Parameter Passing / Request Parameters in JSF 2.0 (转)
- Oracle 中的游标(用Javase中Iterator 类比之)
- java 20 - 6 加入了异常处理的字节输出流的操作
- c#转义字符串中的所有正则特殊字符
- 返回到上一页的html代码的几种写法
- J2SE知识点摘记(十五)
- Django中Q查询及Q()对象
- android 网络连接 HttpGet HttpPost方法
- 题解:luoguP1861 星之器
- 区块链使用Java,以太坊 Ethereum, web3j, Spring Boot
- 细说REST API安全之防止重放攻击
- Ubuntu 14.10 下安装伪分布式hbase 0.99.0
- Linux-(telnet,wget)
- 使用docker-compose运行Django
- HDU3439 Sequence
- jquery validator
- a demo for how to use QThread
- PyQt5 简易计算器
- 【ecshop】 完全清除版权信息