Question

这是一个小的登录视图。我在此页面上获得了默认元素，并将它们保存在父容器#loginContainer中。

＆＃13;

#loginContainer{
    padding: 10px 5px 10px 5px;
    color: #ffffff;
    background-color: #262626;
}

.inputField{
    cursor: text;
    border: none;
    border-radius: 2px;
    padding: 7px 13px 7px 13px;
    background-color: #151515;
    color: #ffffff;
}

.btn{
    cursor: pointer;
    border:none;
    font-weight: bold;
    border-radius: 2px;
    padding: 5px 10px 5px 10px;
    margin: 0px 50px 0px 50px;
    font-size: 16px;
    color: #151515;
}

.link{
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

#linkForgotPassword{
    color: #5bb5cd;
    transition: 0.5s;
}

#linkForgotPassword:hover{
    color: #7dd7ef;
    transition: 0.5s;
}

.loginBtn{
    background-color: #5bb5cd;
    transition: 0.5s;
}

.loginBtn:hover{
    background-color: #7dd7ef;
    transition: 0.5s;
}

＆＃13;

            <div id="loginContainer">
                <input class="inputField" type="text" placeholder="Email">
                <input class="inputField" type="text" placeholder="Password">
                <input type="checkbox">Keep me signed in
                <button class="btn loginBtn" onclick="">Sign in</button>
                <a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a>
                <button class="btn loginBtn" onclick="">Create an account</button>
            </div>

＆＃13;

如您所见，所有元素都紧挨着彼此。我希望每个元素都置于前一个元素之下。

那么我应该为每个元素创建一个div还是有一种非常简单的方法来实现这种行为？

Answer 1

是的，这是可能的。您使用的元素是内联元素，默认情况下彼此相邻。如果你给他们一个display:block;他们将放在彼此之下。看到这个小提琴：https://jsfiddle.net/bwL45gL4/

Answer 2

我相信你要的是让它看起来像下面的css代码。您的容器和间距必须进行调整。如果您愿意，可以将容器div的宽度设置为更合适的大小，并将margin: 8px 0;添加到需要间距的每个元素

用以下代码替换你的css代码：

#loginContainer{
    padding: 10px 5px 10px 5px;
    color: #ffffff;
    background-color: #262626;
}

.inputField{
    cursor: text;
    border: none;
    border-radius: 2px;
    padding: 7px 13px 7px 13px;
    background-color: #151515;
    color: #ffffff;
     width: 100%;
}

.btn{
    cursor: pointer;
    border:none;
    font-weight: bold;
    border-radius: 2px;
    padding: 5px 10px 5px 10px;
    margin: 0px 50px 0px 50px;
    font-size: 16px;
    color: #151515;
    width: 100%;
}

.link{
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
     width: 100%;
}

#linkForgotPassword{
    color: #5bb5cd;
    transition: 0.5s;
     width: 100%;
}

#linkForgotPassword:hover{
    color: #7dd7ef;
    transition: 0.5s;
}

.loginBtn{
    background-color: #5bb5cd;
    transition: 0.5s;
     width: 100%;
}

.loginBtn:hover{
    background-color: #7dd7ef;
    transition: 0.5s;
}

Answer 3

可以使用表格或div来显示它们。

#loginContainer{
    padding: 10px 5px 10px 5px;
    color: #ffffff;
    background-color: #262626;
}

.inputField{
    cursor: text;
    border: none;
    border-radius: 2px;
    padding: 7px 13px 7px 13px;
    background-color: #151515;
    color: #ffffff;
}

.btn{
    cursor: pointer;
    border:none;
    font-weight: bold;
    border-radius: 2px;
    padding: 5px 10px 5px 10px;
    margin: 0px 50px 0px 50px;
    font-size: 16px;
    color: #151515;
}

.link{
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

#linkForgotPassword{
    color: #5bb5cd;
    transition: 0.5s;
}

#linkForgotPassword:hover{
    color: #7dd7ef;
    transition: 0.5s;
}

.loginBtn{
    background-color: #5bb5cd;
    transition: 0.5s;
}

.loginBtn:hover{
    background-color: #7dd7ef;
    transition: 0.5s;
}

<div id="loginContainer"><table><tr><td>
                <input class="inputField" type="text" placeholder="Email"></td></tr>
             <tr><td>   <input class="inputField" type="text" placeholder="Password"></td></tr>
             <tr><td>   <input type="checkbox">Keep me signed in</td></tr>
             <tr><td>   <button class="btn loginBtn" onclick="">Sign in</button></td></tr>
             <tr><td>   <a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a></td></tr>
             <tr><td>   <button class="btn loginBtn" onclick="">Create an account</button></td></tr>
            </div>

Answer 4

正如@MikeMcCaughan所说，您可以使用display: block样式轻松完成此操作。以下示例将块显示应用于inputField班级，link班级和loginBtn班级。

通过使用display: block，每个元素将填充该行，导致下一行显示在下一行。一旦您应用了块显示，您就可以自定义元素＆＃39;与其他样式（margin，padding等）的位置。

＆＃13;

#loginContainer {
  padding: 10px 5px 10px 5px;
  color: #ffffff;
  background-color: #262626;
}

.inputField {
  cursor: text;
  border: none;
  border-radius: 2px;
  padding: 7px 13px 7px 13px;
  background-color: #151515;
  color: #ffffff;
  display: block;
}

.btn {
  cursor: pointer;
  border: none;
  font-weight: bold;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  margin: 0px 50px 0px 50px;
  font-size: 16px;
  color: #151515;
}

.link {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  display: block;
}

#linkForgotPassword {
  color: #5bb5cd;
  transition: 0.5s;
}

#linkForgotPassword:hover {
  color: #7dd7ef;
  transition: 0.5s;
}

.loginBtn {
  background-color: #5bb5cd;
  transition: 0.5s;
  display: block;
}

.loginBtn:hover {
  background-color: #7dd7ef;
  transition: 0.5s;
}

＆＃13;

<div id="loginContainer">
  <input class="inputField" type="text" placeholder="Email">
  <input class="inputField" type="text" placeholder="Password">
  <input type="checkbox">Keep me signed in
  <button class="btn loginBtn" onclick="">Sign in</button>
  <a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a>
  <button class="btn loginBtn" onclick="">Create an account</button>
</div>

＆＃13;

在CSS中创建额外的div或处理单个元素

4 个答案: