Question

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

段落＆＃34;用户名＆＃34;
输入（文本）
parargraph＆＃34;密码＆＃34;
输入（密码）
按钮（提交）

之间有小空间，但我不明白如何让它们保持在彼此之下:(

一个好的代码可以帮助我吗？

CSS：

.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{

}

HTML：

<!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>

对不起，如果这段代码看起来很糟糕，很久没有玩好编码了。呵呵非常感谢!!!

Answer 1

你要问的是（差不多）默认行为，只需要输入和按钮就可以转到block元素，让它们自己行。看看下面的例子：http://jsfiddle.net/kr8cyobk/

    <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;
}

请注意，我冒昧地让您的输入自动关闭（<input />）并将这些p标记转换为语义上更正确的label s，这样您就可以获得额外的优势它们是可点击的，屏幕阅读器和抓取工具之类的东西可以让你对页面有更多的了解。

使div内部的元素相互影响

1 个答案: