Question

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

目前的情况如下：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/>

Answer 1

只需考虑一些余量：

＆＃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;

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

＆＃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;

Answer 2

如果没有更好地创建一个更好的网格系统（个人而言，我使用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" />

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

2 个答案: