2012-02-03 97 views
3

我的應用程序在小屏幕上應該看起來不錯。如果尺寸正常,一切看起來都不錯。但是當屏幕太小時,我的按鈕開始混亂。按鈕跳轉到新行(css)

紅色正方形代表圖像,黃色代表一些文字,藍色代表按鈕。

enter image description here

通常,被顯示在頂部的版本(正確的) 當屏幕小,第二情況發生,當底部按鈕跳轉到一個新行。

理想情況下,兩個按鈕應該保持一個在另一個之上。這是我的css代碼:

{ 
    background-color: #6b89ac; 
    border: 1px solid #89a9d0; 
    border-bottom-color: #1d4474; 
    color: white; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 2px 5px 2px 5px; 
    margin-bottom: 3px; 
    text-align: center; 
    display: inline-block; 
    width: 100px; 
} 

回答

0

它發生在小屏幕上,因爲按鈕被推得足夠遠以滑到圖片下方。嘗試將文本和按鈕一起包裝在一個div中。然後這些按鈕將被該新div的左邊界所約束。

根據你的代碼,新的div也可能需要overflow: hidden

0

在第一種情況下,第二個藍色方塊僅僅因爲紅色方塊的高度足以阻止其清除而被右方保留。

爲了保證藍盒子留到右右,浮動他們的權利{float:right} 你應該再包裝每個組在一個div使第二紅色框不跑成第1組的中間。而且您可能需要對該div應用cleafix解決方案,以確保其高度隨着添加浮點數而適當增加。

clearfix出處:
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method

(我喜歡#2)

0

可以給身體的固定寬度。然後,當窗口寬度減小時,您的佈局不會改變。您可以使用overflow-x屬性來控制滾動條的行爲