更改HTML表单对齐方式

时间:2017-12-22 16:53:09

标签: html css forms

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

此外,有没有办法中心evereything所以我可以将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>

2 个答案:

答案 0 :(得分:0)

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

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

label { margin-right: 12px; }

我不确定您在iFrame上寻找什么,因为它未包含在提供的代码中。

答案 1 :(得分:0)

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

所以

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

或者,您可以只为标签指定一个类,并为它们添加填充/边距。