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>

我希望将所有元素放在另一个元素之下，也就是说，我希望它看起来像这样：

名称：
[领域
电子信箱：
[领域

但是现在，一切都恰到好处 - 我将如何解决这个问题？

Answer 1

添加以下css

 label { display:block }

Answer 2

在css中为新行中的每个元素使用display: block。

Answer 3

只需在代码中的每一行之后使用'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 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>

其次是：您可以设置名为display的属性，使其像块元素一样。像这样：

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

Answer 5

在表单元素

中尝试此css属性

  display: table-caption;

表格输入＆amp;单独行中的标签？

5 个答案: