HTML+CSS解决ul和li的错位、换行问题

这篇博客主要是讲如何解决ul和li的一些问题,作为一个CSS大白,作者最近再做一个非常简单的导航栏(一个ul中套4个li,一行)的时候遇到了很多问题。下面将一一讲述。

问题如下:
1.ul中的li如何横向排序?
2.display:inline、inline-block、block有什么区别?
3.为何分配好100%后会换行?
4.为何ul与li会错位?

1.ul中的li如何横向排序?
解决方法:
两种,一种是给li元素的样式里面加个float:left,一种是给li元素加display:inline或display:inline-block,更推荐第二种,因为第二种不会出现更多的错位。

2.display:inline、inline-block、block有什么区别?
答:看这个英文,就知道,inline是在一行中显示,block是块的意思,表示显示可以调高度宽度的块级元素,而inline-block就是将inline和block合起来,就是可以调宽高的块级元素并且显示在一行里。(我找了好久才发现inline不可以调整高宽)

3.换行问题
答:假如有4个li,那每一个都设宽度为25%,会发现会换一行,但是设置的就是100%!那是因为间距的问题,加上一行margin:0 auto就可以了。

4.ul和li的错位问题
最后我们会发现,ul和li会横向错位一点,(我的就是左边ul比li多出来一点,右边li比ul多出来一点)
答:将ul的样式中加入padding:0px;即可解决。

  • 7
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值