内联块中有几个元素在Firefox中显示得很好但由于某些原因在Safari和Chrome中定位都不正常
CSS:#bb-tools {
float: right;
width: 100%;
text-align: right;
position: absolute;
z-index: -1;
}
.main-tools {
display: inline-block;
color: #000000;
font-size: 0.8em;
margin-top: 10px;
width: auto;
height: 30px;
}
.main-tools a img.icon-space { margin-right: 5px; }
.main-tools a {
color: #000000;
text-transform: uppercase;
text-decoration: none;
margin: 0 0 0 15px;
}
.main-tools a:hover {
color: #f4cdd4;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.search-box-responsive {
display: block;
float: left;
height: auto;
}
HTML: <div id="bb-tools">
<div class="main-tools"> <a rel="nofollow" href="#"><span class="login">Log In</span></a> <a href="#"><span class="help">Help</span></a> <a class="basket" rel="nofollow" href="#"><img src="http://www.placehold.it/20x23" width="18" height="20" style="display:inline-block; border:0;" alt="" /> <span class="basket-contents"> <span class="basket-count"><sup> (100) </sup></span></span></a>
<div class="search-box-responsive">
<form class="search-responsive" role="search" method="get" action="#">
<fieldset>
<input id="headerSearch" name="q" type="text" placeholder="Search" />
<input id="headerSearch" value="" type="submit" />
</fieldset>
</form>
</div>
</div>
</div>
查看,如果在Firefox中打开,显示为应有的:
谁能解释一下?感谢阅读
当你的锚点都不是浮动的时候,它就会把表单推到下一行,然后才可以浮动。
如果你在div
中包装你的锚,然后将float:right
添加到该div,它应该解决你的问题
请注意是什么导致了这个问题,因为我没有得到你想要实现的css。
如果你只是想解决这个问题,你可以把.search-box-responsive
放在DOM
的链接之前,如果可能的话。
演示(已在safari和chrome中测试)
旁注:float对绝对可能的元素没有影响,据我所知
在#bb-tools
div之后添加.search-box-responsive
div,如