在单独的行中输入输入和标签？

Question

我有一个表格：

<form action="thankyou.php" method="post"> 
    <label>Name:</label> 
    <input class="contakt-input" type="text" name="firstname"/> 

    <label for="">E-mail</label> 
    <input class="contakt-input" type="text" name="secondname"/> 
</form> 

我想有下面的另一个的所有元素，那就是，我想有它看起来像这样：

名称：
[字段]
电子邮件：
[现场]

但现在，一切都只是钻机ht彼此相邻 - 我将如何解决这个问题？

Answer 1

添加以下CSS

label { display:block } 

Answer 2

使用display: block在CSS你想在一个新行的每个元素。

Answer 3

试试这个CSS属性的表单元素

display: table-caption; 

Answer 4

只要使用 'BR' 标记每行之后在你的代码是这样

<form action="thankyou.php" method="post"> 
    <label>Name:</label><br> 
    <input class="contakt-input" type="text" name="firstname"/><br> 

    <label for="">E-mail</label><br> 
    <input class="contakt-input" type="text" name="secondname"/> 
</form> 

这里是一个demo。

Answer 5

有两种方法可以解决它。 首先是这样的：使用标签<br>。它的作用就像键盘上的“输入”按钮。

<form action="thankyou.php" method="post"> 
    <label>Name:</label><br> 
    <input class="contakt-input" type="text" name="firstname"/> 
    <br> 
    <label for="">E-mail</label><br> 
    <input class="contakt-input" type="text" name="secondname"/> 
</form> 

其次是：您可以设置称为显示的属性，使它像一个块元素。像这样：

<form action="thankyou.php" method="post"> 
<label>Name:</label><br> 
<input class="contakt-input" type="text" name="firstname"/> 
<br> 
<label for="">E-mail</label><br> 
<input class="contakt-input" type="text" name="secondname"/> 
</form>