为什么会这样竖着排列，不是横着排列？


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="CSS Tools Reset CSS.css">
    <style>
        .box{
            width: 590px;
            height: 470;
            margin:50px auto;
        }
        .img-list li{
            /* 不设置偏移量，则元素的位置不发生改变 */
            position: absolute;
            /* 这里为什么使用absolute而不适用relative？
                因为绝对定位会脱离文档流，下面的东西会上来，相对定位则不会
                也就是说，看似绝对定位没动，其实还是有变化了，也对页面产生了影响
            */

        }
        .img-point{
            /* width: 100px;
            height: 100px; */
            /* background-color: aquamarine; */ 
            /* 为了使point里面的元素能够按行排列，所以把装li的盒子point设置为绝对定位，这样的话不影响里面的li */
            position:absolute;
            /* position: relative; */
            /* 为什么使用relative？
                因为relative是相对于自身来定位的
                而absolute的话，在这里没有任何祖先元素开启了定位，所以自动定位到了HTML，如果在这个时候设置偏移量，就是相对于左上角那个远点。
            */
            /* left: 28px;
            top: 438px; */
        }

        .img-point a{
            float: left;
            /* display: block; */
            width: 8px;
            height: 8px;
            background-color: rgba(183, 22, 22, 0.3);
            border-radius: 50%;
            margin: 0 2px;
        }
        .img-point a:hover{
            background-color: rgba(255, 255, 255 );
            outline: solid 2.5px rgba(255,255,255,0.3)
        }
    style>
head>
<body>
    <div class="box">
        <div class="img-list">
         <ul>
            <li class="img1"><a href="javascript:;"><img src="./q.jpg" alt="" >a>li>
            <li class="img2"><a href="javascript:;"><img src="./q (1).jpg" alt="">a>li>
            <li class="img3"><a href="javascript:;"><img src="./q (2).jpg" alt="">a>li>
            <li class="img4"><a href="javascript:;"><img src="./q (3).jpg" alt="">a>li>
            <li class="img5"><a href="javascript:;"><img src="./q (4).jpg" alt="">a>li>
            <li class="img6"><a href="javascript:;"><img src="./q (5).jpg" alt="">a>li>
            <li class="img7"><a href="javascript:;"><img src="./q (6).jpg" alt="">a>li>
            <li class="img8"><a href="javascript:;"><img src="./q (7).jpg" alt="">a>li>
        ul>
        div>
         <div class="img-point">
                <ul class="point">
                    <li class="point1"><a href="javascript:;">a>li>
                    <li class="point2"><a href="javascript:;">a>li>
                    <li class="point3"><a href="javascript:;">a>li>
                    <li class="point4"><a href="javascript:;">a>li>
                    <li class="point5"><a href="javascript:;">a>li>
                    <li class="point6"><a href="javascript:;">a>li>
                    <li class="point7"><a href="javascript:;">a>li>
                    <li class="point8"><a href="javascript:;">a>li>
                ul>
        div>
    div>
body>
html>

img

img

加一个
.point {
display: inline-flex;
}

见谅不要用绝对定位和相对定位，你这个竖向显示，主要原因不是因为绝对定位的问题，因为你的 float: left;是针对a标签定义，不是li定义的，这里竖向是由于li的原因造成的