html - 将输入右对齐 (CSS)

Question

所以我有一个网站，基本上是这样的:
用户名:[ ] |
密码:[ ] |
问题是我希望它们与正确的垂直条对齐。这是代码:

<form i  d="cred">
  <h3 class="credin">Username:</h3>
  <input class="credin" type="text" name="username" value=""> <br>
  <h3 class="credin">Password:</h3>
  <input class="credin" type="password" name="password" value=""> <br>
  <a><p id="logout">(Sign up)</p></a>
  <input id="login" type="submit" value="Log in">
</form>

和CSS

.credin {
    font-size:21px;
    margin:0px;
    display:inline;
    font-family:Arial, sans-serif;
}
#login {
    font-size:24px;
    margin-bottom:0px;
    padding-bottom:0px;
    width:30%;
}
#logout {
    margin:0px;
    font-size:19px;
}
input.credin{
    margin-left:auto;
    margin-right:0px;
    padding-right:0px;
    padding-left:auto;

这是一个更大的图景。

.credin {
    font-size:21px;
    margin:0px;
    display:inline;
    font-family:Arial, sans-serif;
}
#login {
    font-size:24px;
    margin-bottom:0px;
    padding-bottom:0px;
    width:30%;
}
#logout {
    margin:0px;
    font-size:19px;
}
input.credin{
    margin-left:auto;
    margin-right:0px;
    padding-right:0px;
    padding-left:auto;
    }

<form i  d="cred">
  <h3 class="credin">Username:</h3>
  <input class="credin" type="text" name="username" value=""> <br>
  <h3 class="credin">Password:</h3>
  <input class="credin" type="password" name="password" value=""> <br>
  <a><p id="logout">(Sign up)</p></a>
  <input id="login" type="submit" value="Log in">
</form>

Answer 1

我会做成这样。

<form id="cred">
  <div>
        <label class="label">Username:</label>
        <input class="credin right" type="text" name="username" value="">
  </div>
  <div style="clear: both;">
        <label class="label">Password:</label>
        <input class="credin right" type="password" name="password" value="" > <br>
  </div>
  <div>
        <a><p id="logout">(Sign up)</p></a>
        <input id="login" type="submit" value="Log in">
  </div>
    </form>

CSS 会像这样:

#cred {
  width: 500px;
}
.label {
    font-size:21px;
  font-weight: bold;
  display: inline-block;
    font-family:Arial, sans-serif;
  float: left;
}
#login {
    font-size:24px;
    margin-bottom:0px;
    padding-bottom:0px;
    width:30%;
}
#logout {
    font-size:19px;
}
input.credin{
    margin-left:auto;
    margin-right:0px;
    padding-right:0px;
    padding-left:auto;
}
input.credin.right{
  float: right;
}

不过，这是快速修复，您可以检查是否有其他解决方案适用。