为什么我的<a>内容不对齐

图片说明

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #img{/*背景图*/
            background-image: url(1.jpeg);
        }
        .log{/*文本框*/
            width: 300px;
            height: 40px;
            margin: 15px 10px 10px 10px;/*上 右 下 左,两个文本框的边距*/
            text-indent: 10px;
        }
        .box{/*盒子*/
            width: 399px;
            height: 279px;
            border-radius: 4px;
            border: 5px solid green;
            border-color: transparent;
            padding: 25px;
            margin: 25px;   
            position: absolute;
            left: 780px;
            top: 150px;
            background-color: white;
        }
        .butt{/*登录按钮*/
            width: 300px;
            height: 50px;
            margin: 10px 10px 10px 10px;
            background-color: rgba(134,206,47,1.00);
        }
        a:hover{
            position: absolute;
            left: 368px;
            top: 295px;
            font-size: 15px;
            text-decoration:none;  /*鼠标放上去有下划线*/
        }
    </style>
</head> 

<body id="img">
    <div>
        <div class="text" style="text-align: center">
            <h1>欢迎你的到来</h1>

            <div>
                <p>登录</p><hr>
            </div>

            <div class="box">
                <form action="" method="post">
                    <input type="text" name="ID" placeholder="学号" class="log"><br>
                    <input type="text" name="name" placeholder=" 姓名" class="log"><br>
                    <input type="submit" value="登录" class="butt">

                    <a href="#">意见反馈</a>
                    <a href="#" style="left: 293px;top: 295px">注册账号</a>
                    <a href="#" style="left: 218px;top: 295px">忘记密码</a>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
css

2个回答

因为你是居中对齐,加上换行,否则和登录挤一起了。

    <br /> <a href="#">意见反馈</a>
                   <br /> <a href="#" style="left: 293px;top: 295px">注册账号</a>
                   <br /> <a href="#" style="left: 218px;top: 295px">忘记密码</a>

也可以把意见反馈那三个链接标签单独放到一个div中,如下所示:

           <div class="box">
                <form action="" method="post">
                    <input type="text" name="ID" placeholder="学号" class="log"><br>
                    <input type="text" name="name" placeholder=" 姓名" class="log"><br>
                    <input type="submit" value="登录" class="butt">  
                </form>
                <div>
                    <a href="#">意见反馈</a>
                    <a href="#" style="left: 293px;top: 295px">注册账号</a>
                    <a href="#" style="left: 218px;top: 295px">忘记密码</a>
                </div>
            </div>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!