我已经尝试了很多 float 组合、display: inline-blocks 和 position: relative 或 absolute。
在网站的移动版本上,似乎无法在同一行的两边获得菜单栏和 Logo 。
这是网站:http://goo.gl/3VONrG
<div class="main-header bg-main-header" id="header_top">
<div class="main-center">
<!-- left content on header -->
<div class="f-left f-left-all">
<!-- fix logo middle -->
<table class="fix-logo">
<tr>
<td>
<a href="<?php echo home_url()?>" class="logo"><img src="<?php echo $website_logo[0];?>" alt="<?php echo $general_opts->get_site_title(); ?>" /></a>
</td>
<td>
<div id="hide-show-button" style="margin-top: 30px;"></div>
</td>
</tr>
</table>
<div id="hide-show-button"></div>
<div class="slogan"></div>
</div>
这是CSS代码:
#hide-show-button {
float: right !important;
background: url("images/menu-icon-dna.png") no-repeat right top/ auto 30px;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
height: 50px !important;
width: 70px !important;
margin-bottom: 30px !important;
margin-top: 30px !important;
z-index: 999;
}
感谢任何帮助。
最佳答案
解决方案:使用display: flex;
For cross-browser support: use
display: inline-block;
关于html - 无法在右侧 float 菜单图标,但左侧仍有图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35537725/