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框架，他们通常会使用CSS框架，称为网格布局＆＃39;。

如何将表格和按钮内联？

2 个答案: