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幫助 - 浮動

回答

相關問題