css - 在右侧对齐表单元素 - 文本字段和提交按钮

Question

我已经尝试了很多方法来尝试让这些文本字段的右侧与提交按钮对齐，但无济于事。

按钮似乎没问题(按钮和框架集边框之间的间距正确，但文本字段超出了范围。

可能是什么问题？

#loginform {
  width: 580px;
  background-color: rgb(200,200,200);
  opacity: 0.8;
  font-size: 1.5em;
  border: #00a0d0 5px solid;
  padding: 30px;
}

.logintextfield {
  font-size: 1em;
  width: 100%;
}

.loginbutton {
font-size: 1em;
height: 2em;
background-color: #689C41;
width: 100%;
border-top: lightgreen;
border-left: lightgreen;
border-right: darkgreen;
border-bottom: darkgreen;
border-style: solid;
border-width: 2px;
}

Answer 1

为您的 CSS 中的所有元素包含 box-sizing:border-box 以指定它们应该在元素的总宽度和高度中包含填充和边框

* {
box-sizing: border-box;
}

#loginform {
  width: 580px;
  background-color: rgb(200,200,200);
  opacity: 0.8;
  font-size: 1.5em;
  border: #00a0d0 5px solid;
  padding: 30px;
}

.logintextfield {
  font-size: 1em;
  width: 100%;
}

.loginbutton {
font-size: 1em;
height: 2em;
background-color: #689C41;
width: 100%;
border-top: lightgreen;
border-left: lightgreen;
border-right: darkgreen;
border-bottom: darkgreen;
border-style: solid;
border-width: 2px;
}

<form id="loginform">
  <fieldset>
    <legend>SIGN IN</legend>
    <input type="text" class="logintextfield"><br>
    <input type="text" class="logintextfield"><br>
    <input type="submit" class="loginbutton" value="submit">
  </fieldset>
</form>