Html 使div中的元素相互位于下面_Html_Css

Html 使div中的元素相互位于下面

html css

Html 使div中的元素相互位于下面,html,css,Html,Css,我正在尝试做一个小盒子，人们可以登录到我的网站，但我不是最好的CSS。我想要这样的段落“用户名” 输入（文本） parargraph“密码” 输入（密码）按钮（提交）中间的空间很小，但我无法理解如何让它们彼此保持在下面：( 上帝能帮我个忙吗 CSS: HTML: 麻胚霍维迪诺登录博克斯布鲁克纳文口令洛格酒店很抱歉，如果此代码看起来不好，很长时间没有使用编码了，呵呵..非常感谢您的帮助！！！您要求的是（几乎）默认行为，只需将输入和按钮转到块元素，就可以让它们进

我正在尝试做一个小盒子，人们可以登录到我的网站，但我不是最好的CSS。我想要这样的

段落“用户名”
输入（文本）
parargraph“密码”
输入（密码）
按钮（提交）

中间的空间很小，但我无法理解如何让它们彼此保持在下面：(

上帝能帮我个忙吗

CSS:

HTML:


麻胚






霍维迪诺
登录博克斯
布鲁克纳文
口令
洛格酒店

很抱歉，如果此代码看起来不好，很长时间没有使用编码了，呵呵..非常感谢您的帮助！！！

您要求的是（几乎）默认行为，只需将输入和按钮转到

块

元素，就可以让它们进入自己的行。请查看以下示例：

请注意，我冒昧地使您的输入自动关闭（

）并将那些

标记转换为语义更正确的

标签

s，这样你就有了使它们可点击的额外优势，屏幕阅读器和爬虫等东西可以让你的页面更有意义。

你为什么在CSS中使用float？这将防止元素出现在单独的行上。float用于强制一个元素浮动，允许其他元素环绕它。

.login {
float: right;
height: 300px;
width: 300px;
background-color: white;
}

.login p{

float: left;
margin: auto 0;
clear: both;
}
.login input{
float: left;

}
.login button{
float: 
}

.login input{
text-align: center;
}
button.loginBtn{

}

<!DOCTYPE html>
<html>
<head>
<title>Matombrining</title>
<link rel="stylesheet" type="text/css" href="Css/Stil.css"/>
</head>
<body>
<header class="banner">

</header>
<nav>
    <ul>
        <li><a href ="index.html">Hjem</a></li>
        <li><a href ="#">Info</a></li>
        <li><a href ="#">Hvorfor</a></li>
        <li><a href ="#">Login</a></li>
    </ul>    
</nav>

<main class="mainContent">
    <h1>Hovedinfo</h1>
    <div class="login">
        <h1>login boks</h1>
        <p>Brukernavn</p>
        <input type="text" class="userIn" id="userIn"></input>
        <p>Passord</p>
        <input type="password" class="passIn" id="passIn"></input>

        <button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
    </div>

</main>

    <div class="login">
        <h1>login boks</h1>
        <label>Brukernavn
            <input type="text" class="userIn" id="userIn" />
        </label>
        <label>Passord
            <input type="password" class="passIn" id="passIn"></input>
        </label>

        <button type="submit" class="loginBtn" id="loginBtn">Logg inn</button>
    </div>

input, button {
    display: block;
}