如何添加对齐表单输入字段并在它们之间添加空格?

时间:2017-11-28 11:46:13

标签: html forms html-form

我正在尝试创建一个登录页面,但似乎无法使表单字段对齐,并且它们与名称之间有合理的空间。

目前的情况如下:Current

以下是我希望它的样子:Goal

我目前的代码如下所示

<b>Username:</b><input type="text" name="username"> <br/>
<b>Password:</b><input type="password" name="pass"> <br/>
<input type="submit" value="Log in"/> <br/>

2 个答案:

答案 0 :(得分:1)

只需考虑一些余量:

&#13;
&#13;
input {
  margin: 10px 0;
}
&#13;
<b>Username:</b><input type="text" name="username"><br/>
<b>Password:</b><input type="password" name="pass"><br/>
<input type="submit" value="Log in"><br/>
&#13;
&#13;
&#13;

为了获得更好的html结构,你可以这样做:

&#13;
&#13;
.container {
  max-width: 260px;
  margin: 0 auto;
  font-weight: bold;
}

label {
  margin: 10px 0;
  display: block;
}

label input {
  float: right;
}

input[type='submit'] {
  margin-left: 90px;
}
&#13;
<div class="container">
  <label>Username: <input type="text" name="username"></label>
  <label>Password: <input type="password" name="pass"></label>
  <input type="submit" value="Log in">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

如果没有更好地创建一个更好的网格系统(个人而言,我使用Bootstrap来帮助解决这个问题),这将适用于这种特定形式。我建议您查看HTML标记,因为您根本没有使用<label>标记。

您可以创建一些自定义类,这样就不会影响页面上的其他输入和标签。

.input-container{
  display: block;
}

.input-label{
  width: 80px;
  display: inline-block;
}

.text-input{
  margin-bottom: 15px;
}

.button-input{
  margin-left: 85px;
}
<div class="input-container">
  <label for="username" class="input-label">Username:</label>
  <input type="text" name="username" class="text-input">
</div>
<div class="input-container">
  <label for="pass" class="input-label">Password:</label>
  <input type="password" name="pass" class="text-input">
</div>
<input type="submit" value="Log in" class="button-input" />