Html 如何使用 CSS 在两个 <input> 行之间添加空格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1896567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add spaces between two <input> lines using CSS?
提问by Steven
I want to control the layout with CSS. How can I regulate the spaces between <input>elements(I hope they are on two lines) using CSS?
我想用 CSS 控制布局。如何<input>使用 CSS调节元素之间的空间（我希望它们在两行上）？
<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>As you see, I use <br/>to separate elements and get spaces, is there a better way to do it?
如您所见，我使用<br/>分隔元素并获取空格，有没有更好的方法来做到这一点？
回答by Paul Creasey
#detail {margin-bottom:5px;}
回答by dizzy_fingers
You can also wrap your text in label fields, so your form will be more self-explainable semantically.
您还可以将文本包装在标签字段中，这样您的表单在语义上将更易于解释。
Just remember to float labels and inputs to the left and to add a specific width to them, and the containing form. Then you can add margins to both of them, to adjust the spacing between the lines (you understand, of course, that this is a pretty minimal markup that expects content to be as big as to some limit).
请记住将标签和输入浮动到左侧，并为它们添加特定的宽度，以及包含表单。然后，您可以为它们添加边距，以调整行之间的间距（当然，您明白这是一个非常小的标记，期望内容与某个限制一样大）。
That way you wont have to add any more elements, just the label-input pairs, all of them wrapped in a form element.
这样你就不必添加更多元素，只需添加标签-输入对，所有这些元素都包裹在一个表单元素中。
For example:
例如：
<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>
And the css will be:
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*/
}
回答by o.k.w
CSS:
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:
HTML：
<div class="divForText">some text</div>
<input ..... />
<div class="divForLabelInput">some label <input ... /></div>
<div class="divForInput"><input ... /></div>
回答by Davey
#input {
margin:0 0 10px 0;
}
回答by Davey
You don't need to wrap everything in a DIV to achieve basic styling on inputs.
您不需要将所有内容都包装在 DIV 中来实现输入的基本样式。
input[type="text"] {margin: 0 0 10px 0;}
输入[type="text"] {边距：0 0 10px 0;}
will do the trick in most cases.
在大多数情况下都可以解决问题。
Semantically, one <br/> tag is okay between elements to position them. When you find yourself using multiple <br/>'s (which are semantic elements) to achieve cosmetic effects, that's a flag that you're mixing responsibilities, and you should consider getting back to basics.
从语义上讲，在元素之间使用一个 <br/> 标签来定位它们是可以的。当您发现自己使用多个 <br/>（它们是语义元素）来实现装饰效果时，这是您混合职责的标志，您应该考虑回归基础。
回答by Harshit Nadda
You can format them as table !!
您可以将它们格式化为表格！！
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>回答by vrutberg
Try to minimize the use of <br>as much as you possibly can. HTML is supposed to carry content and structure, <br>is neither. A simple workaround is to wrap your input elements in <p>elements, like so:
尽量减少使用<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>
