0
点赞
收藏
分享

微信扫一扫

css li元素平分父div

晴儿成长记 2022-02-19 阅读 86
 <div class="right">
                <ul>
                   <li><a href="#">我的订单</a></li>
                    <li class="envent-li"><a href="#" ></a></li>
                    <li><a href="#">我的品优购</a></li>
                    <li class="envent-li"><a href="#" ></a></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="envent-li"><a href="#" ></a></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="envent-li"><a href="#" ></a></li>
                    <li><a href="#">关注品优购</a></li>
                    <li class="envent-li"><a href="#" ></a></li>
                    <li><a href="#">客户服务</a></li>
                    <li class="envent-li"><a href="#" ></a></li>
                    <li><a href="#">网站导航</a></li>
                </ul>
            </div>
.header .right{
    float: right;
}
.right ul li{
    float: left;
}
//记录margin的区别
.envent-li{
    float: left;
    /* margin: 9px 15px 0; */
}

若把margin上边距改为 0:

.envent-li{

    float: left;

     margin: 0 15px 0;

}

结果:Li元素没有平分父盒子,右侧有空白

 

若添加margin上边距

.envent-li{

    float: left;

     margin: 1px 15px 0;

}

结果:li元素平分父元素

 

举报

相关推荐

0 条评论