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

Question

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

#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"> 
 
       <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>

正如你可以看到，所有的元素放在自己旁边给对方。我希望每个元素都放置在前一个元素的下面。

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

Answer 1

作为@MikeMcCaughan说，你可以通过使用display: block风格轻松地做到这一点。下面的示例将块显示应用于您的inputField类，link类和loginBtn类。

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

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

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

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

可以使用表格或申报单让它们出现在你想要的地方。

#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

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