如何使用 CSS 在两个 <input> 行之间添加空格？答案

【问题标题】：How can I add spaces between two <input> lines using CSS?如何使用 CSS 在两个 <input> 行之间添加空格？
【发布时间】：2018-06-16 03:48:16
【问题描述】：

我想用 CSS 控制布局。如何使用 CSS 调节 <input> 元素之间的空格（我希望它们在两行）？

<form name="publish" id="publish" action="publishprocess.php" method="post">
  Title:<input type="text" id="title" name="title" size="60" maxlength="110" value="<?php echo $title ?>" <br/>
  <div>Contact<input type="text" id="contact" name="contact" size="24" maxlength="30" value="<?php echo $contact ?>" /></div><br/> Task description(You may include task description, requirements on bidders, time requirements,etc):<br/>
  <textarea name="detail" id="detail" rows="7" cols="60" style="font-family:Arial, Helvetica, sans-serif"><?php echo $detail ?></textarea>

  <br/><br/> price <input type="text" id="price" name="price" size="10" maxlength="20" value="<?php echo $price ?>" /><br/>
  <label> Skill or Knowledge Tags</label><br/><input class="tagvalidate" type="text" id="tag" name="tag" size="40" maxlength="60" value="<?php echo $tag ?>" />
  <br/><label>Combine multiple words into single-words, space to separate up to 3 tags<br/>(Example:photoshop quantum-physics computer-programming)</label><br/><br/> District Restriction:
  <?php echo $locationtext.$cityname; ?><br/><br/>

  <input type="submit" id="submit" value="submit" /></form>

如您所见，我使用<br/> 来分隔元素并获取空格，有没有更好的方法？

【问题讨论】：

你的标签应该有 for 属性，输入的 id 是正确的。

标签： html css layout

【解决方案1】：

#detail {margin-bottom:5px;}

【讨论】：

【解决方案2】：

您还可以将文本包装在标签字段中，这样您的表单在语义上将更加易于解释。

请记住将标签和输入向左浮动，并为其添加特定宽度，以及包含表单。然后您可以为它们添加边距，以调整行之间的间距（当然，您知道这是一个非常小的标记，期望内容与某个限制一样大）。

这样您就不必再添加任何元素，只需添加标签-输入对，所有这些都包含在一个表单元素中。

例如：

<form>
<label for="txtName">Name</label>
<input id"txtName" type="text">
<label for="txtEmail">Email</label>
<input id"txtEmail" type="text">
<label for="txtAddress">Address</label>
<input id"txtAddress" type="text">
...
<input type="submit" value="Submit The Form">
</form>

CSS 将是：

form{
float:left; /*to clear the floats of inner elements,usefull if you wanna add a border or background image*/
width:300px;
}
label{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}
input{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}

【讨论】：

我同意，这在语义上比我的方法更好，因为我的示例中的
:s 并不是真正的“段落”。虽然它是万无一失的，适用于每个浏览器，你真的不会弄错。

【解决方案3】：

CSS：

form div {
  padding: x; /*default div padding in the form e.g. 5px 0 5px 0*/
  margin: y; /*default div padding in the form e.g. 5px 0 5px 0*/
}
.divForText { /*For Text line only*/
  padding: a;
  margin: b;
}
.divForLabelInput{ /*For Text and Input line */
  padding: c;
  margin: d;
}
.divForInput{ /*For Input line only*/
  padding: e;
  margin: f;
}

HTML：

<div class="divForText">some text</div>
<input ..... />
<div class="divForLabelInput">some label <input ... /></div>
<div class="divForInput"><input ... /></div>

【讨论】：

【解决方案4】：

#input {
    margin:0 0 10px 0;
}

【讨论】：

【解决方案5】：

尽量减少<br> 的使用。 HTML 应该包含内容和结构，<br> 两者都不是。一个简单的解决方法是将输入元素包装在 <p> 元素中，如下所示：

<form name="publish" id="publish" action="publishprocess.php" method="post">

    <p><input type="text" id="title" name="title" size="60" maxlength="110" value="<?php echo $title ?>" /> - Title</p>
    <p><input type="text" id="contact" name="contact" size="24" maxlength="30" value="<?php echo $contact ?>" /> - Contact</p>

    <p>Task description (you may include task description, requirements on bidders, time requirements, etc):</p>
    <p><textarea name="detail" id="detail" rows="7" cols="60" style="font-family:Arial, Helvetica, sans-serif"><?php echo $detail ?></textarea></p>

    <p><input type="text" id="price" name="price" size="10" maxlength="20" value="<?php echo $price ?>" /> - Price</p>

    <p><input class="tagvalidate" type="text" id="tag" name="tag" size="40" maxlength="60" value="<?php echo $tag ?>" /> - Skill or Knowledge Tags</p>
    <p>Combine multiple words into single-words, space to separate up to 3 tags (example:photoshop quantum-physics computer-programming)</p>

    <p>District Restriction:<?php echo $locationtext.$cityname; ?></p>

    <p><input type="submit" id="submit" value="Submit" /></p>
</form>

【讨论】：

这是一种糟糕的做法。喜欢，可恶！

【解决方案6】：

您无需将所有内容包装在 DIV 中即可实现输入的基本样式。

input[type="text"] {边距：0 0 10px 0;}

在大多数情况下都可以解决问题。

在语义上，一个
标签可以在元素之间定位它们。当您发现自己使用多个
（语义元素）来实现修饰效果时，这是您混合职责的标志，您应该考虑回归基础。

【讨论】：

【解决方案7】：

您可以将它们格式化为表格！！

form {
  display: table;
}
label {
  display: table-row;
}
input {
  display: table-cell;
}
p1 {
  display: table-cell;
}

<div id="header_order_form" align="center">
  <form id="order_header" method="post">
    <label>
      <p1>order_no:
        <input type="text">
      </p1>
      <p1>order_type:
        <input type="text">
      </p1>
    </label>
    </br>
    </br>
    <label>
      <p1>
        creation_date:
        <input type="text">
      </p1>
      <p1>delivery_date:
        <input type="text">
      </p1>
      <p1>billing_date:
        <input type="text">
      </p1>
    </label>
    </br>
    </br>

    <label>
      <p1>sold_to_party:
        <input type="text">
      </p1>
      <p1>sop_address:
        <input type="text">
      </p1>
    </label>
  </form>
</div>

【讨论】：