我怎么能在div的底部设置这些按钮

Question

我试图将这两个按钮放在底部但垂直对齐：底部似乎没有任何效果。

两个街区都在一个班级＆＃34;登录卡＆＃34;而蓝色的东西是按钮/在这个班级内提交。

这是我的css：

.login-card {
  padding: 40px;
  width: 400px;
  height: auto;
  background-color: #F7F7F7;
  margin: 20px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.login-card input[type=text], input[type=password], input[type=email], inputs {
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.login-card input[type=submit], input[type=button] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
  display: table-cell;
  vertical-align: bottom;
}

我错过了一些明显的东西吗？

编辑，添加了Html：

  <div class="col-sm-6">
   <div class="login-card" id="firstCard">
      <h1>Fill the Wheel</h1>

        <form action="javascript:void(0);" name="members" onsubmit="rollIt()">
            <div id="dynamicInput">
               <input class="inputs" type="text" name="input1" placeholder='Type name' required>
               <input class="inputs" type="text" name="input2" placeholder='Type name' required>
               <input class="inputs" type="text" name="input3" placeholder='Type name' required>
           </div>
           <input type="button" id="addInput" class="login login-submit" value="Add a member">
           <input type="submit" id="rollWheel" name="login" class="login login-submit" value="Roll the wheel!">
       </form>
   </div>
  </div>

Answer 1

您的按钮位于表单底部，即其父级。您需要从登录卡或类似的东西中取出填充底部，以使按钮空间向下移动。

此外，这里是右侧框的问题答案

<div class="wrapper">
    <button></button>
    <button></button>
</div>

.logincard:after {
   content: "";
   display: inline-block;
   height: 100%;
   vertical-align: bottom;
}
.wrapper {
    display: inline-block;
    vertical-align: bottom;
}