CSS - 浮動：留在同一行

enter image description here CSS - 浮動：留在同一行

.htabs { /* horizontal tabs */ 
    display: table; 
} 

.htabs li { /* horizontal tab */ 
    position: relative; 
    float: left; 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAMklEQVQIW2M8e3r/fw4OdgZk8OPHTwbGq5eP/QcxYJIwNlgCpBokAAIwBfglsBqFy3IAqdosZ0m+BQ8AAAAASUVORK5CYII=); 
    border-left: 1px solid #e1dfd2; 
    border-top: 1px solid #e1dfd2; 
    border-right: 1px solid #e1dfd2; 
    margin-right: 1px; 
    display: table-row; 
} 

.htabs li a { /* horizontal tab link */ 
    position: relative; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 10px; 
    font-weight: normal; 
    color: #444444 !important; 
    text-shadow: -1px -1px rgba(229,227,215,1), 1px 1px rgba(229,227,215,1); 
    z-index: 1; 
    padding: 0 7px; 
    line-height: 30px; 
}

我試圖做一個充分響應網站，現在我需要一些幫助。看看圖片，當我將瀏覽器窗口調整爲更小的尺寸時 - 「標籤」正在移到第二行看起來很糟糕。我如何強迫他們留在一條線上？

來源

2013-10-26 Macko Tarana

你會在CSS問題上做的更好，創建一個jsFiddle，以便人們可以實時修補它。 – arb

我會盡力做jsFiddle –

我要說的是，事情你正在做的不是響應式網站！

創建響應式佈局的第一步是規劃出您想要的解決方案。通用分辨率包括320px智能手機的縱向寬度，768px縱向寬度的平板，1024px平板橫向寬度。請使用Media queries。例如，

@media screen and (max-width: 960px) {  
    #content { 
     margin: 0 20px 0 0; 
    } 
}

在您的情況下，您必須決定要在不同設計中顯示的屏幕大小。

@media screen and (max-width: 960px) { 


@media screen and (max-width: 758px) { 


} 

@media screen and (max-width: 524px) { 

}

你可以學習如何Create a responsive website step by step

編輯：我剛添加的width: 20%;到.htabs li它使每個li標籤可以推卸。此外，您應該根據瀏覽器大小將字體大小更改爲更小和更大。因此，只需在每個媒體查詢中添加以下說明並嘗試修改字體大小以適應瀏覽器大小。

.htabs li { /* horizontal tab */ 
    width: 20%; 
    .... 
} 

.htabs li a { 
    font-size: 10px; 
}

來源

2013-10-26 20:06:32 lvarayut

我已經在使用媒體查詢。其他一切正常。等待小提琴 –

@MackoTarana偉大的，所以給我小提琴。我會盡力幫你解決它，或者只是給我你的網站的網址。 – lvarayut

第二個字「我們」正在移動到下一行。我會再想一想這件事。感謝您的時間:) –

您應該將菜單欄包含到指定了高度和寬度的元素中以避免此情況。此外，您應該將overflow:hidden屬性添加到此包裝。

來源

2013-10-26 19:40:16

您正在使用「PX」，而不是「％」和「EM，REM」屬性，你應該使用％或「EM」在響應式設計的填充或寬度，

來源

2013-10-26 20:02:19 Radian

但是，如果我仍然嘗試添加更多選項卡，它看起來完全一樣。 –

CSS - 浮動：留在同一行

回答

相關問題