标签右浮动顺序倒转问题

2023-08-09 09:13| 来源: 网络整理| 查看: 265

今天写了一个导航栏 , 我给ul下的li加了右浮动,我发现顺序倒转

*{ /*清除边距*/ margin: 0; padding: 0; } div{ /*用div包起来,看的清除*/ width: 150px; height: 20px; border: 3px solid red; } ul{ /*清除默认样式*/ list-style: none; } ul li{ width: 30px; float: right;/*这一行才是重点*/ } ul li:nth-child(odd){/*加个颜色,看的清除*/ background: palegreen; } 一二三

页面输出结果如下解决方法为,把三个 li 的父级元素 ul 右浮动,然后把 li 左浮动 (给顺序倒转的元素添加一个父元素,使父元素向所需方向浮动,子元素反方向浮动) 代码如下:

*{ margin: 0; padding: 0; } div{ width: 150px; height: 20px; border: 3px solid red; } ul{ list-style: none; float: right; /*重点*/ } ul li{ width: 30px; float: left; /*重点*/ } ul li:nth-child(odd){ background: palegreen; } 一二三

这下就对了在这里插入图片描述

【本文地址】

公司简介

联系我们