910JQK. 2022-03-10 23:15 采纳率: 85.7%
浏览 68
已结题

设置浮动后没有效果，而且旁边还多了小点

问题遇到的现象和发生背景

.point里面设置左浮动时不起作用，而且还多了几个小点

问题相关代码，请勿粘贴截图
<title>Document</title> 

  •             <li>
                <a href="#">
                    <img src="./img/lun2.webp">
                </a>
            </li>
            
            <li>
                <a href="#">
                    <img src="./img/lun1.webp" >
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/lun3.jpg" >
                </a>
            </li>
        </ul>
        <div class="point">
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
        </div>
    </div>
</div>
    我的解答思路和尝试过的方法

    img

    我想要达到的结果

    三个红色的小点正常浮动，没有多余的小点，最好能解释其原因

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-03-11 09:32
    关注

    应该对.point下的li float，而不是li下的a，a只有一个元素，所以不会并排，而且要去掉li的默认list-style，要不会多黑点。改下面就行了

    img

    
<style>
    .banner {
        position: relative;
        height: 460px;
    }

    .banner .img-list li {list-style:none;
        position: absolute;
    }

    .banner img {
        width: 100%;
        /* 把元素的顶端与行中最高元素的顶端对齐 */
        vertical-align: top;
    }
    /* 设置banner下面的三个小点 */

    .point {
        position: absolute;bottom:0
    }
    .point li{float:left;list-style:none;margin-right:5px}
    .point a {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: red;
    display:block
    }
</style>
</head>
<body>
    <div class="banner-wapper">
        <div class="banner w">
            <ul class="img-list">

                <li>
                    <a href="#">
                        <img src="./img/lun2.webp">
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="./img/lun1.webp">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/lun3.jpg">
                    </a>
                </li>
            </ul>
            <ul class="point">
                <li><a href="javascript:;"></a></li>
                <li><a href="javascript:;"></a></li>
                <li><a href="javascript:;"></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 3月19日
  • 已采纳回答 3月11日
  • 创建了问题 3月10日

悬赏问题

  • ¥15 echarts动画效果失效的问题。官网下载的例子。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件，但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加