html - 在表单中对齐三个按钮

Question

我试图在一个表单中对齐三个按钮，但中间的按钮始终固定在底部。

jsfiddle sketch

---HTML---

<form action="view.php" method="GET">
    <button class="option delete-option" type="button"></button>
    <button class="btn" type="submit">59752fbd5f346</button>
    <button class="option edit-option" type="button"></button>
</form>

---CSS---

.btn {
    font-family: 'Arima Madurai', cursive;
    background-color: Transparent;
    color: black;
    cursor: pointer;
    font-size: 16px;
    max-width: 300px;
    position: relative;
    width: 100%;
    border: 1px solid;
    overflow: hidden;
}
.btn span {
    font-family: 'Arima Madurai', cursive;
}
.btn:after {
    background: red;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
}

.btn:hover:after {
    left: 120%;
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.option{
    opacity: 0.5;
    transition: 200ms;
  width: 32px;
  height: 32px;
  border: 0;
  position: relative;
}

.option:hover{
  opacity: 1;
}

.delete-option{
  background: url("http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png") no-repeat scroll 0 0 transparent;
}
.edit-option{
  background: url("http://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/32/edit-icon.png") no-repeat scroll 0 0 transparent;
}

我还注意到从 Mozilla 打开页面，中央按钮似乎固定在顶部。

Answer 1

你可以让表单成为一个 flexbox:

form {
  display: flex;
  justify-content: space-between;
  width: 70%; /* just for demo */
}

.delete-option {
  background: url(http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png) no-repeat scroll 0 0 transparent;
}

.btn {
  font-family: 'Arima Madurai', cursive;
  background-color: Transparent;
  color: black;
  cursor: pointer;
  font-size: 16px;
  max-width: 300px;
  position: relative;
  width: 100%;
  border: 1px solid;
  overflow: hidden;
}

.edit-option {
  background: url(http://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/32/edit-icon.png) no-repeat scroll 0 0 transparent;
}

.option {
  opacity: 0.5;
  transition: 200ms;
  width: 32px;
  height: 32px;
  border: 0;
  position: relative;
}

<form action="view.php" method="GET">
  <button class="option delete-option" type="button"></button>
  <button class="btn" type="submit">59752fbd5f346</button>
  <button class="option edit-option" type="button"></button>
</form>