原文网址：CSS--解决float: right在空间不够时会自动往下移的问题-CSDN博客
简介
众所周知，float: right在空间不够时会自动往下移。那么怎样让它不要往下移呢？本文介绍解决方案。
需求
我想写一个无需列表，每个列表后边跟一个五角星，五角星展示在右侧。
问题复现
现象
可以发现，由于第二个链接占满了，导致五角星只能展示在下边，跟下一个挤到一起了！
代码
<html xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="anchor,fixed navigation hide anchor">
<title></title>
<style>
.menus {
width: 140px;
}
.icon-right {
float: right;
}
</style>
</head>
<body>
<div class="menus">
<ul class="menu">
<li>
<a>第一个链接</a>
<div class="icon-right">☆</div>
</li>
<li>
<a>第二个链接aa</a>
<div class="icon-right">☆</div>
</li>
<li>
<a>第三个链接aaa</a>
<div class="icon-right">☆</div>
</li>
</ul>
</div>
</body>
</html>解决方案
添加如下CSS：
.menu li {
position: relative;
}
.icon-right {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
}
.menu li a{
margin-right: 20px;
}结果
全部代码
<html xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="anchor,fixed navigation hide anchor">
<title></title>
<style>
.menus {
width: 140px;
}
.icon-right {
float: right;
}
.menu li {
position: relative;
}
.icon-right {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
}
.menu li a{
margin-right: 20px;
}
</style>
</head>
<body>
<div class="menus">
<ul class="menu">
<li>
<a>第一个链接</a>
<div class="icon-right">☆</div>
</li>
<li>
<a>第二个链接aa</a>
<div class="icon-right">☆</div>
</li>
<li>
<a>第三个链接aaa</a>
<div class="icon-right">☆</div>
</li>
</ul>
</div>
</body>
</html>
