Question

我试图使用flex将父级内的项目与父级的底部对齐，但由于某种原因它不起作用。我做错了什么？

＆＃13;

undefined

＆＃13;

#login {
border: 1px solid red;
height: 50px;
display: flex;
}
.login {
border-radius: 5px;
padding: 5px;
align-self: flex-end;
}
#loginButton {
border-radius: 5px;
padding: 7.5px;
background-color: black;
color: white;
cursor: pointer;
}

＆＃13;

Answer 1

在表格上：

form {
    display: flex;
    align-items: flex-end;
    margin: 0;
    height: 100%;
}

由于只有Flex容器的子元素成为弹性项目，因此请设置您希望对齐flex容器的元素的父级。

在您的代码中，#login是灵活容器，使form成为唯一的灵活项目。您需要flex属性才能更深层次地应用一个级别，因此也要使form成为一个Flex容器。

Answer 2

您需要在父级中对齐项目。

* {
  box-sizing: border-box;
}
#login {
  border: 1px solid red;
  height: 50px;
  display: flex;
  align-items: flex-end;
}
.login {
  border-radius: 5px;
  padding: 5px;
}
#loginButton {
  border-radius: 5px;
  padding: 7px;
  background-color: black;
  color: white;
  cursor: pointer;
}

<div id='login'>
  <form method='POST' action='login.php'>
    <input class='login' type='text' name='username' maxlength='20' placeholder='Username' size='10'>
    <input class='login' type='password' name='password' maxlength='20' placeholder='Password' size='10'>
    <input class='login' id='loginButton' type='submit' value='Login'>
  </form>
</div>

Answer 3

<html> <head> <style> body { padding: 0; margin: 0; } body > * { overflow: auto; width: 100%; height: 100%; position: absolute; perspective: 1000px; } div#container { width: 200%; transform-style: preserve-3d; } #t, #b, #l, #r { margin-left: 45%; margin-right: 45%; width: 100px; height: 100px; background-color: yellow; border: 10px solid black; border-radius: 10px; transform-style: preserve-3d; } #t { transform: rotateX(270deg); } #b { transform: rotateX(90deg); } #l { position: relative; top: 180px; left: -60px; transform: rotateY(270deg); } #r { position: relative; top: -180px; left: 60px; transform: rotateY(90deg); } </style> </head> <body> <div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="container"> <div id="l"> <h1>left</h1> </div> <div id="t"> <h1>top</h1> </div> <div id="b"> <h1>bottom</h1> </div> <div id="r"> <h1>right</h1> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </body> </html>应该是弹性容器，form可用于完成定位并避免拉伸。

margin

form {
  border: 1px solid red;
  height: 50px;
  display: flex;
}
.login {
  border-radius: 5px;
  padding: 5px;
  margin: auto 1em;
}
#loginButton {
  border-radius: 5px;
  padding: 7.5px;
  background-color: black;
  color: white;
  cursor: pointer;
  margin-left: auto;
}
/* added for demo purpose to see the form in middle */

html {
  height: 100%;
  display: flex;
}
body {
  width: 80%;
  margin: auto;
}

使用flex将项目对齐到底部

3 个答案: