标签右浮动顺序倒转问题

今天写了一个导航栏 , 我给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>

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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读