文章/答案/技术大牛

发布

社区首页 >问答首页 >更改HTML表单对齐方式

问更改HTML表单对齐方式
EN

Stack Overflow用户

提问于 2017-12-23 00:53:09

回答 2查看 39关注 0票数 0

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

另外，有没有办法把所有东西都放在中间，这样我就可以把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>

forms

html

css

回答 2

Stack Overflow用户

发布于 2017-12-23 00:58:43

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

如果要为每个项目使用标签，则可以简单地添加此样式(我在示例中使用了12px，当然您也可以使用最适合您的样式)：

label { margin-right: 12px; }

关于iFrame，我不确定您在寻找什么，因为它没有包含在所提供的代码中。

票数 0

Stack Overflow用户

发布于 2017-12-23 03:12:36

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

所以

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47944862

复制

相似问题

问更改HTML表单对齐方式
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改HTML表单对齐方式EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改HTML表单对齐方式
EN