当前位置：首页 > news >正文

CSS--解决float: right在空间不够时会自动往下移的问题

news 2025/7/12 20:54:02

原文网址：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>

查看全文

http://www.dtcms.com/a/108320.html