项目场景:
ul,li代码优化,实现代码复用,会产生li间距问题,li的边框处理细节问题
注:本篇文章所有图片页面效果仅供学习使用
问题描述:
优化前:代码优化前按照布局,使用ps一像素一像素的进行量取,做到入下图页面效果,使用的是ul加宽度,然后将ul盒子margin: 0 auto;居中,然后后面有代码可以套用这个相同的代码,就没有过多地思考,就把代码拖过去用,由于第二份中的ul、li列表项少了一条,将其删除之后页面的布局就出现了巨大的问题
问题:添加li,减少li,都会对布局产生影响
代码
<div class="content_nav container">
<ul class="content_btnTop container">
<li>建筑景观</li>
<li>文旅项目</li>
<li>灯光节</li>
</ul>
</div>
#content{height: 100%;}
.content_nav{height: 172px;overflow: hidden;}
.content_btnTop{width: 600px;height: 48px; text-align: center;margin: 56px auto 68px;}
.content_btnTop li{height: 48px;line-height: 48px; width: 200px;float: left;border: 1px solid #c92007;color: #333333;}
.content_btnTop li:nth-of-type(2){border-left: none;border-right: none;}
.content_btnTop li:hover{background-color: #c92007;color: #ffffff;}
分析:单从静态页面来看,li的居中显示还是没毛病的,能达到设计稿要求,出于程序员写页面能复用的代码尽量减少工程量的心理(纯粹为了偷懒哈哈哈),我将此处的代码挪用到了其他类似的页面中,由于其ul列表的子项li减少了一个,就对我的布局以及边框产生了影响,如下图:
代码
<div class="content_nav container">
<ul class="content_btnTop container">
<li>公司新闻</li>
<li>行业新闻</li>
</ul>
</div>
#content{height: 100%;}
.content_nav{height: 172px;overflow: hidden;}
.content_btnTop{width: 600px;height: 48px; text-align: center;margin: 56px auto 68px;}
.content_btnTop li{height: 48px;line-height: 48px; width: 200px;float: left; border: 1px solid #c92007;color: #333333;}
.content_btnTop li:last-child{border-right: none;border-left: none;}
.content_btnTop li:hover{background-color: #c92007;color: #ffffff;}
于是:我将其父元素ul不定宽,将li的元素类型改为行内块display:inline-block;浮动去除,使用margin居中,发现li与li之间存在缝隙,难受,具体解决方法:
对于li间隔问题解决方法:(嘿嘿嘿这个方法是在书上看到的)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,ol,li{list-style: none;}
.box1{
margin: 100px auto;
background-color: red;
width: 500px;
height: 500px;
/* 边框粗细设置为小于3px,缩放页面会引发布局问题(border会变为3.227) */
border: 2px solid black;
}
/* li块级元素,在实际应用中会有很多情况是需要将其设置于同一行显示
li与li之间会有空白间隔(display:inline-block),原因,解决方法?
原因:
浏览器会把内联元素的空白字符(空格、换行、Tab)渲染成一个空格,li于一行显示后,其换行后产生的换行字符被浏览器渲染成一个空格,占了一个字符宽度。
解决:
1、float:left 影响:有些容器不能设置浮动(左右切换焦点图)
2、将li全部写在一行 影响:代码不美观
3、ul的字符尺寸:font-size:0 影响:ul中其他的字符尺寸也被设为0,Safari浏览器没用
4、ul的字符间隔:letter-spacing:-8px; 影响:li内字符间隔也被设为-8px,还需要将字符间隔改为:normal*/
ul{
/* 第三种 */
/* font-size: 0; */
/* 第四种 */
letter-spacing: -8px;
}
li{
width: 100px;
height: 20px;
/* 第一种 */
/* float: left; */
display: inline-block;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<!-- 第二种 -->
<!--
<li></li>
<li></li><li></li><li></li>
-->
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
最后留下边框问题:
然后遇到同类型的页面布局就可以套用这个代码了,加上li对其布局没有影响了,该剧居中的也居中了,边框也不需要我在考虑了,万事大吉
优化后:
<div class="content_nav container">
<ul class="content_btnTop container">
<li>公司新闻</li>
<li>行业新闻</li>
</ul>
</div>
#content{height: 100%;}
.content_nav{height: 172px;overflow: hidden;}
.content_btnTop{height: 48px; text-align: center;margin: 56px auto 68px;letter-spacing: -8px;}
.content_btnTop li{height: 48px;line-height: 48px; width: 200px;display: inline-block; border: 1px solid #c92007;border-right: none;color: #333333;letter-spacing: normal;}
.content_btnTop li:last-child{border-right: 1px solid #c92007;}
.content_btnTop li:hover{background-color: #c92007;color: #ffffff;}