更改HTML表单对齐方式

Question

我正在尝试增加标签和表单输入框之间的空间。我将在下面发布图片和当前代码。只是想知道我需要添加哪些代码来增加空间。谢谢！

此外，有什么方法可以集中所有内容，所以我可以将iFrame移动到我的页面中心，它会自动显示。

enter image description here

<style>
body {background-color: transparent;}
body {font-family: avenir;}
</style>

<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">


<form action="https://example.example.com/servlet/servlet.Example?encoding=UTF-8" method="POST">


<input type=hidden name="oid" value="00D5E0000000UJe">
<input type=hidden name="retURL" value="https://example.com/">


<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>

<label for="last_name">Last Name</label><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" required=true /><br><br>

Date of Birth:<span class="dateInput dateOnlyInput"><input  id="00N5E000000rknN" name="00N5E000000rknN" size="12" type="text" /></span><br><br>

<label for="city">City</label><input  id="city" maxlength="40" name="city" size="20" type="text" /><br><br>

<label for="mobile">Mobile</label><input  id="mobile" maxlength="40" name="mobile" size="20" type="text" required=true/><br><br>

<label for="email">Email</label><input  id="email" maxlength="80" name="email" size="20" type="text" required=true /><br><br>

Current/Previous School/University:<input  id="00N5E000000rwVf" maxlength="100" name="00N5E000000rwVf" size="20" type="text" /><br><br>

Course you would like to study:<input  id="00N5E000000rkdr" maxlength="255" name="00N5E000000rkdr" size="20" type="text"/><br><br>

<label for="lead_source">Where did you hear about us?</label><select  id="lead_source" name="lead_source"><option value="">--None--</option><option value="Ahmed Al-Ajmi">Ahmed Al-Ajmi</option>
<option value="British Council">British Council</option>
<option value="Career day">Career day</option>
<option value="Facebook">Facebook</option>
<option value="Flier / Poster">Flier / Poster</option>
<option value="Google">Google</option>
<option value="Instagram">Instagram</option>
<option value="Twitter">Twitter</option>
<option value="University Website_(Please specify)">University Website_(Please specify)</option>
<option value="Web">Web</option>
</select><br><br>

<input type="submit" name="submit">

</form>

Answer 1

首先，为每个项目使用实际标签会很有帮助。也许这就是你的意图。

如果您要为每个项目使用标签，您可以简单地添加此样式（我使用12px作为示例，但当然您可以使用最适合您的任何内容）：

label { margin-right: 12px; }

我不确定你在寻找iFrame的内容，因为它没有包含在提供的代码中。

Answer 2

我可能误解了这个问题，但是如果你想在标签和输入表格之间留一个空格，只需在它们之间加一个空格即可。

所以

<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>

会成为

<label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required=true/><br><br>

或者，您可以只为标签分配一个类，并为它们添加填充/边距。