老师，我在写登录栏时用了浮动，但是左右不在一行，麻烦老师帮忙检查一下哪里出错了，谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单文本密码长度验证</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:18px;
            font-family:"微软雅黑";
            color: black;
        }
        .w{
            width:1200px;
            margin:0 auto;
        }
        .img{
           border-bottom:3px solid red;
           margin-top:10px;
        }
        .main{





        }
        .topbar{
            height:30px;
            background-color:#EDECED;
            color: #797375;
            margin-top:10px;
            border:1px solid #DFDEE0;
        }
        #login{
            float:left;
            height:30px;
            margin-left:5px;
        }
        #logoout{
            float:right;
            height:30px;
            font-size:14px;

        }
        a{
            color:#83403F;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <div class="w">
        <!-- 版头“慕课网” -->
        <div class="img">
          <img src="img/logo.png" class="src">
        </div>
        <!--用户登录页面-->
        <div class="main">
          <div class="topbar">
            <div id="logoin">用户登录</div>
            <div id="logoout">没有账号，请<a href="#">注册</a></div>
          </div>
          <!-- 账号和密码 -->
          <div class="text">

          </div>
        </div>
        <!-- 底部脚本图片 -->
        <div>

        </div>
    </div>
</body>
</html>

嫣语四然 2023-08-13

源自：DOM&BOM 3-6 表单验证

收起

1回答

好帮手慕小尤 2023-08-14 10:05:53

同学你好，因logoin没有设置浮动会独占一行，从而导致logoout在下面一行。建议同学将logoin设置为浮点，如下所示：

#logoin{
            float:left;
        }

祝学习愉快！

收起回答

提问者嫣语四然 #1

老师，我写了左浮动了，麻烦老师再看一下。

2023-08-14 13:41:08
好帮手慕小尤回复提问者嫣语四然 #2

同学你好，1、同学在设置css与html中的id值不一致，建议同学进行修改。如下所示：
2、查看样式是否成功设置，同学可以在浏览器控制台中进行查看。如下所示：
祝学习愉快！

2023-08-14 13:53:06