请问为什么在同一个div里写的文字:“前段开发 >”会串行,而且标签a明明没设置尺寸却有莫名其妙的尺寸

img

img

img

span padding 80px,li高度才45px,宽度190容不下肯定不会在同一行了

img

span的padding应该是0 8px就可以了

img

<style>
    .subnav{width:190px}
    .subnav ul li{
    float:left;width:190px;height:45px;list-style:none
    }
    .subnav ul li a{
    float:left;
    font-size:14px;line-height:45px
    }
    .subnav ul li a span{float:right;padding:0 8px}
</style>
<div class="subnav">
    <ul>
        <li><a href="#">前端开发<span>></span></a></li>
        <li><a href="#">前端开发<span>></span></a></li>
        <li><a href="#">前端开发<span>></span></a></li>
        <li><a href="#">前端开发<span>></span></a></li>
        <li><a href="#">前端开发<span>></span></a></li>
    </ul>
</div>

img

你span的 padding: 80px; 是设置span上下左右四边的边距都是80px
这样span上下边距加起来是160px再加上一行文字高度就超过li的高度45px了,这就把a的尺寸撑高了
同样span左右边距加起来也是160px再加"前段开发"这几个文字宽度就超过li的宽度190px了,一行放不下自然显示成两行
你把 padding: 80px; 改成 padding-right: 80px; 只设置右边距即可

标签有自带的尺寸,可以自己设置想要的尺寸覆盖掉即可

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632