前端问题（一）关于css控制导航栏浮动问题

最新推荐文章于 2025-08-15 16:03:53 发布

原创最新推荐文章于 2025-08-15 16:03:53 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文记录了一位前端开发者在实现右对齐菜单时遇到的问题及解决方案。通过改变ul的浮动方向并调整li的浮动方向，成功实现了菜单右对齐，避免了繁琐的计算和额外的div填充。此外，作者反思了自己的思维定势，强调了在开发中灵活变通的重要性。

float对齐边框< li >标签顺序反了

最近在看前端的css部分，尝试写出一个页面的头部，我用ul做的菜单栏，然后float向左没有问题，因为右边空出来，也不用，但是尝试向右浮动，就出现问题了。
图：
li列表反了
虽然可以向右，但是我写的li都反了，html代码：

				<ul class="top-menu">
					<li>你好，请<a href="#">登录</a></li>
					<li class="spilt">|</li>
					<li><a href="#">免费注册</a></li>
					<li class="spilt">|</li>
					<li><a href="#">我的订单</a></li>
					<li class="spilt">|</li>
					<li><a href="#">我的京东</a></li>
					<li class="spilt">|</li>
					<li><a href="#">京东会员</a></li>
					<li class="spilt">|</li>
					<li><a href="#">企业采购</a></li>
				</ul>

所以我就想，换成向左浮动：

向左浮动
但是我是想让黄色部分右对齐，我就想要不加一个div，填补下，但是右边确实不好对齐，你要自己算宽度，对了，灰色的顶部上有一个长度为1200px的div，我的红色和黄色的部分都是在这个div里面，我最后试到337.5px，不放大看着好像对齐了。
图：
边距问题
还尝试使用了margin-right：0px；padding-right=0；没用。要计算剩余值挺麻烦的，毕竟li的菜单内容也可能会变，你总不能再去改吧？
css代码（部分）：

.top-menu{
	float: left;
	list-style: none;

}
.top-menu li{
	float: left;
	padding: 0 15px;
	background-color: gold;
	margin-right: 0;
}
/*这个是用来占空间的div类选择器*/
.empty{
	width: 330px;
	float: left;
	background-color: green;
}

html代码（部分）：

		<div id="" class="top">
			<div id="" class="w1200">
				<p class="loc">安徽</p>
				<div id="" class="empty">
					测试
				</div>
				<ul class="top-menu">
					<li>你好，请<a href="#">登录</a></li>
					<li class="spilt">|</li>
					<li><a href="#">免费注册</a></li>
					<li class="spilt">|</li>
					<li><a href="#">我的订单</a></li>
					<li class="spilt">|</li>
					<li><a href="#">我的京东</a></li>
					<li class="spilt">|</li>
					<li><a href="#">京东会员</a></li>
					<li class="spilt">|</li>
					<li><a href="#">企业采购</a></li>
				</ul>
			</div>
		</div>

所以我觉得真实开发不会这么做的，太麻烦了吧。我就在想怎么弄，后来查了下资料，我发现我犯傻了。
解决：先将ul设为右浮动，里面的li设置左浮动。
效果：

css代码：

.top-menu{
	float: right;
	list-style: none;

}
.top-menu li{
	float: left;
	padding: 0 15px;
	background-color: gold;
	margin-right: 0;
}

注意上面的float值。
html部分删除测试所在div即可。
我怎么就没有想到呢。太教条了，我得学会变通，表示太好玩了，自己有必要记录下。

参考
好，就到这，下次见。
sue
2021年2月22日22:38:16

标签

#css #html