CSS帮助 - 浮动

我有一个艰难的时间修复一个小问题。我在为这个CSS问题寻求帮助时感到有些尴尬，但不同的眼睛可能有助于解决这个问题。CSS帮助 - 浮动

发行

转到http://ajaxtown.com/uranium/
最顶端，你会发现一个酒吧（电话号码和社会图标和搜索）
现在调整窗口大小（手机大小）
再次将其最大化为完整widt H。
你会看到搜索图标下来。

解决方案

虽然与萤火虫实验，我发现，如果你在搜索图标检查元素，你会发现下面的CSS。
```
.top-search { 
    float: left; 
    width: 40px; 
} 
```
如果我不检查浮动，然后再次检查它，一切都得到修复。搜索图标与社交图标对齐。

但我无法解决这个问题。

任何帮助将不胜感激。

请让我知道，如果我不清楚我的问题。

萨哈

来源

2013-12-19 Abhishek Saha

火狐给了我没有错误，Chrome，但是！你为什么不将float应用于'social-icons top-social-icons' –

我已经将float：left应用于该类。 –

我设法解决这个问题是这样的：

在CSS：

//Before 

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

//after 

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

来源

2013-12-19 09:36:16

我把搜索到.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>

快速修复

来源

2013-12-19 08:24:12 misterManSam

我尝试了你建议的方式，但是没有奏效。 –

奇怪的是，在Chrome中适合我。我所做的只是在开发人员工具中将'div.top-search'拖放到'div.social-icons'中。 – misterManSam

任何运气@AbhishekSaha？ – misterManSam

CSS修复

.topbar右。顶栏，右内{

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

}只有

@media屏幕（最大宽度：767px）{

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

}

来源

2013-12-19 08:32:21

这确实奏效。但问题是我无法硬编码宽度。因为社交图标是可配置的。这意味着用户可以添加/删除社交图标。不管怎么说，多谢拉。 –

这对我的作品在Chrome （金丝雀）

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

来源

2013-12-19 08:59:43 Merlin

CSS帮助 - 浮动

回答

相关问题