个人中心
gpt4 book ai didi

html - 定位div类

转载 作者：行者123 更新时间：2023-11-28 04:08:39 25 4
gpt4 key购买 nike

我正在为练习设计 facebook 登录页面。仅使用 html 和 css。我的问题是我想并排放置 .username、.password、submitButton 类(就像原来的那样)。但CSS不工作。这是我的 html 代码

                <!DOCTYPE HTML>
            <html lang="en-US">
            <head>
                <meta charset="UTF-8">
                <title>Facebook- Log In or Sign Up</title>
                <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
            </head>
            <body>
                <header class="mainHeader"> 
                    <div class="mainArea">
                        <div class="logoArea">
                        <img src="media/6cVHHozUQSt.png" alt=""/>
                        </div>
                        <div class="loginArea">
                        <form action="#">
                        <div class="userName">
                        <label for="user">Email or Phone </label> <br/>
                            <input type="text" id="user"/><br/>
                            <input type="checkbox" id="keepLogin"/>
                            <label for="keepLogin"> Keep me Logged In</label>
                        </div>
                        <div class="password"> 
                        <label for="password">Password </label>
                            <input type="password" id="password"/>
                            <a href="#">Forgotten you password?</a>
                        </div>
                        <div class="submitButton"> 
                            <input type="submit" value="Log In"/>
                        </div>
                        </form>
                        </div>
                    </div>
                </header>
            </body>
            </html>

这是CSS

                body{
                margin:0;
                padding:0;
            }

            header.mainHeader:after{
                content:"";
                display: block;
                clear: both;
            }
            header.mainHeader{
                background:#3a5797;
            }
            .mainHeader .logoArea{
                width: 50%;
                float: left;
            }
            .mainHeader .loginArea{
                float:right;
                width:50%;
            }
            .loginArea .username, .loginArea .password{
                width: 40%;
                float: left;
            }
            .loginArea .submitButton{
                width: 20%;
                float: left;
            }

最佳答案

将 float:left 应用于 .userName 并用于其余对齐.password a {display: block;}.submitButton {边距:16px 0}

关于html - 定位div类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42829037/

25 4 0
文章推荐： c++ - 双向链表不能正确打印值
文章推荐： javascript - 如何在 Chrome 开发工具中使用 jQuery 遍历执行上下文？
文章推荐： css - 我怎样才能使一个 div 承担其包含的 div 的 100%？
文章推荐： c++ - 无法打印指针 vector
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com