html li内部水平排列,怎样使用li进行水平排列

这次给大家带来怎样使用li进行水平排列,使用li进行水平排列的注意事项有哪些,下面就是实战案例,一起来看一下。

li水平排列

html{

font-size: 20px;

}

@media only screen and (min-width: 320px){

html{font-size: 20px !important;}

}

@media only screen and (min-width: 350px){

html{font-size: 22.5px !important;}

}

@media only screen and (min-width: 365px){

html{font-size: 23px !important;}

}

@media only screen and (min-width: 375px){

html{font-size: 23.5px !important;}

}

@media only screen and (min-width: 390px){

html{font-size: 24.5px !important;}

}

@media only screen and (min-width: 400px){

html{font-size: 25px !important;}

}

@media only screen and (min-width: 428px){

html{font-size: 26.8px !important;}

}

@media only screen and (min-width: 432px){

html{font-size: 27.4px !important;}

}

@media only screen and (min-width: 481px){

html{font-size: 30px !important;}

}

@media only screen and (min-width: 569px){

html{font-size: 35px !important;}

}

@media only screen and (min-width: 569px){

html{font-size: 40px !important;}

}

body{

margin: 0;

padding: 0;

}

ul{

width: 100%;

margin: 0.3rem 0;

padding:0.3rem 0;

border-top:0.05rem solid #ccc;

border-bottom: 0.05rem solid #ccc;

}

li{

width: 33%;

list-style-type: none;

display:inline-block;

font-size: 0.8rem;

border-left: 0.05rem solid #ccc;

text-align: center;

}

  • 我是第一个li
  • 我是第二个li
  • 我是第三个li

d73c35cbeefaa2765bc4674e9e33d4a9.png

a_34767

这样会有一个问题给li的宽度设置为33%,三个li标签的宽度居然超过了一行,有一点很明显就是li标签直接多了一点空白。

一、浮动

首先想到的是浮动,给li增加样式float:left。

19672e9544cdb1cfd0862309419cf663.png

a_34767

效果如上,这样的方式,浮动会有一个问题,就是li的浮动使得ul的高度为0,解决这问题,有三种方法:

1、给ul增加height高度,但是这样不能做到自适应。

2、清楚浮动的影响,在最后的li标签后面增加一个空的p,

(个人推荐,但是觉得代码维护上也不是很好。)

3、对ul增加zoom属性,貌似只适应与ie(我没研究)。

dff3e919b9d286a2db5d6fe2392322fa.png

a_34767

二、将li标签写成一行

  • 我是第一个li
  • 我是第二个li
  • 我是第三个li

很奇怪为什么这样就正常了,暂时很难理解。

6a074c8e8c40f20365d4c4def472273c.png

a_34767

三、给ul增加样式去掉li标签之间空白

给ul增加font-size:0样式可以去除li标签之间的空白。这样有点需要注意的就是需要重新设置li标签的字体大小。

a_34767

b6d8d310c4cdbd064eaccced2a285717.png

相信看了本文案例你已经掌握了方法,更多精彩请关注jquery中文网其它相关文章!

推荐阅读:

怎样使用javascript Date Format方法

如何使用Zepto tap事件的穿透与点透(附代码)

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值