如何使用按钮内联对齐表单?
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 请求时遇到了问题。
最佳答案
将其包裹在一个 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>
关于javascript - 如何使表单和按钮内联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49147230/