Question

我很难解决一个小问题。我在为这个CSS问题寻求帮助时感到很尴尬，但是另一组眼睛可能有助于解决这个问题。

问题

转到http://ajaxtown.com/uranium/
极端顶部你会找到一个酒吧（电话号码和社交图标和搜索）
现在调整窗口大小（移动大小）
再次将其最大化为全宽。
您会看到搜索图标下来。

解决

在尝试使用firebug时，我发现如果你检查搜索图标上的元素，你会发现下面的css。
```
.top-search {
   float: left;
   width: 40px;
}
```
如果我取消选中浮动然后再检查它，一切都会得到修复。搜索图标与社交图标对齐。

但我无法解决这个问题。

任何帮助都将受到高度赞赏。

如果我不清楚我的问题，请告诉我。

萨哈

Answer 1

我将搜索放入.social-icons div

<div class="social-icons top-social-icons">
    <a href="http://twitter.com/username" class="twitter" rel="external"><i class="icon icon-twitter"></i></a><a href="http://www.facebook.com/username" class="facebook" rel="external"><i class="icon icon-facebook"></i></a><a href="http://ajaxtown.com/uranium/?feed=rss2" class="rss" rel="external"><i class="icon icon-rss"></i></a>
    <div class="top-search">
        <a class="top-search-bt open" href="#">
        <i class="icon"></i></a>
    </div>
</div>

快速修复

Answer 2

这适用于Chrome（Canary）

<div class="social-icons top-social-icons">
    //social icons here
    <a class="top-search-bt open" href="#"><i class="icon"></i></a>
</div>

Answer 3

CSS修复

.topbar-right .topbar-right-inner {

border-right: 1px solid #E2E2E2;
width:163px;

}

@media only screen and（max-width：767px） {

.topbar-right .topbar-right-inner {
    border-right: none;
    margin: 0 auto;
}

}

Answer 4

我设法通过这种方式解决了问题：

在CSS中：

//Before

.top-search {
  float: left;      
  width: 40px;
}

//after

.top-search {
  display: table;      
  width: 40px;
}

CSS帮助 - 浮动

4 个答案: