css - 做导航栏时遇到一个问题

问题描述

问 题

    <header>
        <div>
            <img src="C:\Users\acer\tupian\icon-1.png">
            <p>新世界</p>
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">最新活动</a></li>
                <li><a href="#">项目介绍</a></li>
                <li><a href="#">爱心社区</a></li>
                <li><a href="#">关于我</a></li>
            </ul>
        </nav>
        <div class="denglu"></div>
    </header>

*{
    padding:0;
    margin:0;
}
body{
    margin: 0 auto;
    width: 1280px;
}
header{
    height: 60px;
}
header img{
    width: 30px;
    height: 30px;
    margin-top: 15px;
    margin-left: 30px;
}
header div:nth-child(1){
    position: absolute;
    width: 200px;
    height:60px;
}
header p{
    position: absolute;
    line-height: 60px;
    left: 70px;
    top: 0;
    font-size: 30px;
}
header nav{
    display: inline-block;
    height: 60px;
    width: 50%;
    position: relative;
    left: 40%;
}
header ul{
    height: 60px;
    width: 100%;
    list-style: none;
}
header li{
    display: inline-block;
    line-height: 60px;
    width: 20%;
    text-align: center;
}

5个li各占20%，为啥图中的第5个li老是跑到下面？

解决方案

li设成 inline-block了, 这是li之间的空白符引起的.
浏览器会把连续的空白符(换行, 空格,制表符...)合并成一个显示出来.
解决办法.
一: li 的父元素设置 font-size: 0;

header ul{ 
    font-size: 0; 
}
header ul li{
    font-size: /*重新设置字体大小*/;
}

二: 把 li 改成浮动, 或者用 flex 布局.

header ul li{
    float: left; /*记得清除浮动*/
}

/* flex */
header ul{
    display: flex;
    flex-flow: row nowrap;
}
header ul li{
    flex: 1 1 20%;
}

三: 就是把 li 之间的空白符去掉.
当然这看起来很恶心...

<ul><li><a href="#">首页</a></li><li><a href="#">最新活动</a></li><li><a href="#">项目介绍</a></li><li><a href="#">爱心社区</a></li><li><a href="#">关于我</a></li></ul>

我自己常用的就是把父元素的font-size设为0,
不过得注意这个在一些老浏览器上会失效.

这篇关于css - 做导航栏时遇到一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！