Question

我正在尝试提交申请表。我的表格中有六个输入法。但是输入是紧密相连的。

https://gyazo.com/939f90c739d538ab53e14bb4e1402b1f

我想在我的输入之间添加一些空格。我在stackoverflow上搜索了一个答案，但我无法使用它，因为他们使用了textarea

我的代码:(我使用过bootstrap类）

＆＃13;

<div class="center_div">
  <form class="contact-form" id="solliform" role="form" autocomplete="off">
    <input type="email" class="form-control" id="email" name="email" placeholder="Email (nodig voor uitslag)">
    <input type="text" class="form-control" id="naam" name="naam" placeholder="Habbonaam">
    <input type="text" class="form-control" id="leeftijd" name="leeftijd" placeholder="Uw leeftijd">
    <input type="text" class="form-control" id="rang" name="rang" placeholder="Voor welke rang solliciteert u">
    <div class="text-center">
      <button class="btn btn-main btn-lg" type="submit button" id="send" data-toggle="modal" data-target="#sollipop">Verzenden</button>
    </div>
  </form>
</div>

＆＃13;

Answer 1

使用Bootstrap中可用的保证金类。在您的Html代码添加。

<input type="email" class="form-control m-1" id="email" name="email" placeholder="Email (nodig voor uitslag)">

详情请访问

Bootstrap - Margin and Padding

Answer 2

您可以使用CSS添加空格，如下所示：

input{
    display: block;
    margin-top:20px;
}

button{
  margin-top:20px;
}

Answer 3

这是我的建议。试试这个片段。

<!DOCTYPE html>
<html>
    <head>
        <title>Form Title</title>
        <style type = "text/css">
            body
            {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 11pt;
                margin-left: 2em;
                margin-right: 2em;
            }

            label
            {
                float: left;
                width: 13em;
                margin-bottom: 0.5em;
            }

            input[type = "text"], input[type = "email"]
            {
                width: 15em;
                height: 1.3em;
                margin-left: 0.5em;
                margin-bottom: 0.5em;
            }

            br
            {
                clear: both;
            }

            #submit
            {
                margin-left: 10em;
            }
        </style>
    </head>

    <body>
        <form action = "" method = "post">
            <label>Email (nodig voor uitslag)</label>
            <input type = "email" name = "email" required><br>

            <label>Habbonaam</label>
            <input type = "text" name = "hab" required><br>

            <label>Uw leeftijd</label>
            <input type = "text" name = "uw" required><br>

            <label>Voor welke rang solliciteert u</label>
            <input type = "text" name = "voor" required><br>

            <label>&nbsp;</label>
            <input type = "submit" value = "Verzenden" id = "submit">
        </form>
    </body>
</html>

在输入之间添加空格

3 个答案: