目前代码如下，如何实现底部对齐：.login_fields__submit input { margin-top:15px; border-radius: 50px; background: transparent; padding: 10px 0px; border: 2px solid #4FA1D9; color: #4FA1D9; text-transform: uppercase; font-size: 14px; width:22%; -webkit-transition-property: background,color; transition-property: background,color; -webkit-transition-duration: .2s; transition-duration: .2s; margin-left:18%; position:relative; }

您可以使用CSS Flexbox布局来实现底部对齐。将包含该输入框的父元素设置为flex容器，并将justify-content属性设置为flex-end。代码如下：

.login_fields__submit {
display: flex;
justify-content: flex-end;
}

.login_fields__submit input {
margin-top: 15px;
border-radius: 50px;
background: transparent;
padding: 10px 0px;
border: 2px solid #4FA1D9;
color: #4FA1D9;
text-transform: uppercase;
font-size: 14px;
width: 22%;
-webkit-transition-property: background, color;
transition-property: background, color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
margin-left: 18%;
position: relative;
}

相关问题

如何底部对齐container，其中CSS为：/*设置容器位置,margin上右下左*/ #container{ width:500px; background-color: #fff; height:550px; margin: 2% auto; border-radius: 10px; box-shadow: 0 0 0 5px deepskyblue,0 0 0 10px orangered,0 0 0 15px deepskyblue; poistion:absolute; }，/*设置为flex布局，方便之后底部对齐*/ .login_fields__submit { display: flex; justify-content: flex-end; align-items: flex-end; } /*设置按钮样式，以及按钮位置，然后点上去会变色*/ .login_fields__submit input { margin-top: auto; border-radius: 50px; background: transparent; padding: 10px 0px; border: 2px solid #4FA1D9; color: #4FA1D9; text-transform: uppercase; font-size: 14px; width:22%; -webkit-transition-property: background,color; transition-property: background,color; -webkit-transition-duration: .2s; transition-duration: .2s; margin-right:19%; position:relative; }

首先，需要将 `position` 属性的拼写更正为 `position`。其次，如果要实现底部对齐，需要将父元素 `#container` 的高度设置为 100%，并将其位置设置为相对定位 `position: relative`。然后，在子元素 `.login_fields__submit` 中设置 `align-self: flex-end`，使其垂直对齐到父元素的底部。最后，需要将子元素 `.login_fields__submit` 的位置设置为绝对定位 `position: absolute`，并且设置 `left: 0; bottom: 0;`，使其固定在父元素的底部。

以下是修改后的 CSS 代码：

#container {
  width: 500px;
  background-color: #fff;
  height: 550px;
  margin: 2% auto;
  border-radius: 10px;
  box-shadow: 0 0 0 5px deepskyblue, 0 0 0 10px orangered, 0 0 0 15px deepskyblue;
  position: relative; /* 修改为相对定位 */
  height: 100%; /* 设置高度为100% */
}

.login_fields__submit {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: flex-end; /* 添加这行代码，使其垂直对齐到父元素的底部 */
  position: absolute; /* 修改为绝对定位 */
  left: 0; /* 设置为0 */
  bottom: 0; /* 设置为0 */
}

.login_fields__submit input {
  margin-top: auto;
  border-radius: 50px;
  background: transparent;
  padding: 10px 0px;
  border: 2px solid #4FA1D9;
  color: #4FA1D9;
  text-transform: uppercase;
  font-size: 14px;
  width: 22%;
  -webkit-transition-property: background, color;
  transition-property: background, color;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  margin-right: 19%;
  position: relative;
}

这样，就可以实现底部对齐了。

/*设置为flex布局，方便之后底部对齐*/ .login_fields__submit { display: flex; justify-content: flex-end; height: 18%; }如何实现底部对齐

这段代码已经使用了 flex 布局，并且使用了 justify-content 属性将子元素对齐到父元素的末尾。如果你想要实现底部对齐，需要将父元素的高度设置为 100%。这样，子元素就会自动对齐到父元素的底部。另外，你需要确保父元素的高度是由其包含的内容决定的，而不是固定的高度。以下是一个示例代码：

.login_fields__submit {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  align-items: flex-end; /* 添加这一行，让子元素底部对齐 */
}

这样设置之后，父元素的高度会自动适应子元素的高度，而子元素会被对齐到父元素的底部。