css代码优化，静态页面代码套用问题之li一行显示（display:inline-block）间距问题

九九七七

已于 2022-03-14 21:40:43 修改

阅读量921

点赞数 2

文章标签： css 前端

于 2022-03-02 21:32:46 首次发布

本文链接：https://blog.csdn.net/qq_54455551/article/details/123239812

版权

项目场景：

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;}