对齐右侧的表单元素 - 文本字段并提交按钮

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，以指定它们应该在元素的总宽度和高度中包含填充和边框

＆＃13;

＆＃13;

* {
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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;