如何使表格和按鈕內聯？

Question

如何使表單與按鈕內聯對齊？

的HTML

<a href='games'><button><i class='fa fa-gamepad'></i></button></a>
<a href='settings'><button><i class='glyphicon glyphicon-cog'></i></button></a>
<form action='../assets/php/logout_php.php' method='POST'>
   <button id='odhlaseni' type='submit' name='submit'><i class='glyphicon glyphicon-off'></i></button>
</form>

的CSS

/*Just those buttons*/
div div button {
    margin-top: 3px;
    font-size: 17px;
    margin-right: 10px;
    display: inline !important;
    padding-bottom: 1px !important;
    border: 2px solid #474747;
    color: #474747;
    background-color: transparent;

    -webkit-transition: 0.5s;
    transition: 0.5s;
}

/*Hover for those buttons*/
div div button:hover {
  color: #f5f5f5;
  background-color: #474747;
}

我有這樣的東西https://imgur.com/a/WjRGl
1 =菜單圖標
2 =游戲
3 =設置
4 =我的問題-注銷按鈕。
我只想將第四個按鈕與第三個按鈕對齊。 我可以使用CSS margin-left和-top輕松完成此操作，但是在移動設備上無法正確顯示。 然后，我嘗試僅創建一個按鈕（該按鈕與數字2和3完全對齊），但是我在向我的logout.php文件發送ajax請求時遇到了問題。

Answer 1

將其包裝在div中，並顯示為flex ：

 /*Just those buttons*/ div div button { margin-top: 3px; font-size: 17px; margin-right: 10px; display: inline !important; padding-bottom: 1px !important; border: 2px solid #474747; color: #474747; background-color: transparent; -webkit-transition: 0.5s; transition: 0.5s; } /*Hover for those buttons*/ div div button:hover { color: #f5f5f5; background-color: #474747; } .wrap{ display:flex; flex-flow:row; } 

 <div class="wrap"> <a href='games'><button class='marginLeftGames'><i class='fa fa-gamepad'></i></button></a> <a href='settings'><button><i class='glyphicon glyphicon-cog'></i></button></a> <form action='../assets/php/logout_php.php' method='POST'> <button id='odhlaseni' type='submit' name='submit'><i class='glyphicon glyphicon-off'></i></button> </form> </div> 

Answer 2

您需要將所有按鈕包裝在具有列寬的容器中。

如;

.btn-col {
  min-width: 24.75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

然后，您可以在其中包裹每個按鈕，它應該為它們留出空間，調整按鈕數量的寬度。

如果您使用的是CSS框架，則通常會附帶此框架，稱為“網格布局”。