如何在 HTML 中对齐输入表单 [英] How to align input forms in HTML
问题描述
我是 HTML 新手，我正在努力学习如何使用表单.
到目前为止，我遇到的最大问题是对齐表单.这是我当前的 HTML 文件的示例:
问题在于，与名字和姓氏相比，电子邮件"之后的字段框在间距方面截然不同.使他们基本上排队"的正确"方法是什么?
我正在尝试练习良好的形式和语法……很多人可能会用 CSS 做到这一点，我不确定，到目前为止我只学习了 HTML 的基础知识.
另一个例子，这个使用了 CSS，我只是把表单放在一个带有容器类的 div 中.并指定其中包含的输入元素为容器宽度的 100%，并且两边都没有任何元素.
.container {宽度:500px；清楚:两者；}.容器输入{宽度:100%；清楚:两者；}<头><title>示例表单</title><身体><div class="容器"><表格><label>名字</label><input type="text" name="first"><br/><label>姓氏</label><input type="text" name="last"><br/><label>电子邮件</label><input type="text" name="email"><br/></表单></html>
I'm new to HTML and I'm trying to learn how to use forms.
The biggest issue I am having so far is aligning the forms. Here is an example of my current HTML file:
<form>
First Name:<input type="text" name="first"><br />
Last Name:<input type="text" name="last"><br />
Email:<input type="text" name="email"><br />
</form>
The problem with this is, the field box after 'Email' is drastically different in terms of spacing compared to first, and last name. What is the 'proper' way to make it so that they 'line-up' essentially?
I am trying to practice good form and syntax...a lot of people might do this with CSS I am not sure, I have only learned the very basics of HTML so far.
Another example, this uses CSS, I simply put the form in a div with the container class. And specified that input elements contained within are to be 100% of the container width and not have any elements on either side.
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
<html>
<head>
<title>Example form</title>
</head>
<body>
<div class="container">
<form>
<label>First Name</label>
<input type="text" name="first"><br />
<label>Last Name</label>
<input type="text" name="last"><br />
<label>Email</label>
<input type="text" name="email"><br />
</form>
</div>
</body>
</html>
这篇关于如何在 HTML 中对齐输入表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
