今天写了一个导航栏 , 我给ul下的li加了右浮动,我发现顺序倒转
<style type="text/css">
*{ /*清除边距*/
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;
}
</style>
<body>
<div>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
</div>
</body>
页面输出结果如下
解决方法为,把三个 li 的 父级元素 ul 右浮动,然后把 li 左浮动
(给顺序倒转的元素添加一个父元素,使父元素向所需方向浮动,子元素反方向浮动)
代码如下:
<style type="text/css">
*{
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;
}
</style>
<body>
<div>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
</div>
</body>
这下就对了
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
