調整超級菜單li響應式地讓li平均減少

我一直在用這一塊撓我的腦袋。我需要做一個ul li菜單減少寬度響應。在屏幕寬度減小的時候，最後一個li會換行到另一行。雖然我已經設法在我的一個菜單上執行此操作，但由於li內容的大小並不相同，因此相同類型的css將無法工作。我確實從前面的SO問題找到了一個小提琴，但嘗試這種方法，它完全打破了「購買產品」下拉的樣式調整超級菜單li響應式地讓li平均減少

我試圖實現這樣的事情，因爲視口減少。 http://jsfiddle.net/au9muz43/ 在CSS是

.horizontal-style { 
display: table; 
width: 100% 
} 
.horizontal-style li { 
display: table-cell; 
} 
.horizontal-style a { 
display: block; 
border: 1px solid red; 
text-align: center; 
margin: 0 5px; 
background: #999 
}

我已經建立了一個擺弄一大塊我的CSS和HTML這裏很簡單：https://jsfiddle.net/1Le63xk0/1/

即使添加

display:table-cell;

到我的css行

.mega-menu li{float:left;text-align:center;position:relative;margin-right:15px;border:none;}

打破了產品的下拉布局

來源

2016-11-21 Steve Price

因此，兩個小提琴的快速組合，我注意到一些風格衝突。我刪除您display:block呼籲黎/年，並取得了他們display:table-cell;（這就是爲什麼它會收縮，而不是下降到一個新的生產線的原因。

在把所有你的CSS，這只是固定的情況下，。某些div的是仍然稱呼爲塊/內聯塊，並將它們轉換爲表格格式

的主要問題在這些線路中發現：

.mega-menu li a{color:#fff;outline:0;padding:12px 35px 0px 0px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;} 

.mega-menu li:hover a{color:#007dc5;position:relative;z-index:11;padding:4px 11px 3px 11px;}

如果你有這樣推着大量填充每個格

這裏是JSFiddle。

編輯：更新只是爲了帶來更多的他的CSS。

編輯2：仍然是downvoted，除了雙重檢查OPs display屬性之外，沒有別的辦法可以解釋它。 OP沒有迴應解釋小提琴有什麼問題，據我所知，它有他要求的一切：縮小的導航，他的下拉工作方式一樣。

來源

2016-11-21 19:03:29

這實際上是回答問題的問題，所以不知道爲什麼有人選擇投票。我需要對CSS進行一些調整來整理懸停動作等，但它確實能夠滿足我的需要。 –

答案沒有任何問題。這正是我所要求的。隨着寬度的減小以及下拉菜單功能的正常運行，導航li的縮小。除了惡意之外，我沒有看到任何降價的理由。 –

第一：width:100%上缺少;。其次，可以通過將顯示更改爲塊和內聯塊來解決。表格顯示用於表格，並且（可能）不打算在這種情況下使用。

.horizontal-style { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.horizontal-style li { 
 
    display: inline-block; 
 
    float:left; 
 

 
} 
 
.horizontal-style a { 
 
    display: block; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    margin: 0 5px; 
 
    background: #999 
 
} 
 

 
div { 
 
    background: #ccc 
 
}

<div style="width: 100%;"> 
 
    <ul class="horizontal-style"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Shop By Products</a></li> 
 
     <li><a href="#">Shop By Brand</a></li> 
 
     <li><a href="#">Why Choose Us</a></li> 
 
     <li><a href="#">Support</a></li> 
 
     <li><a href="#">Offers</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
</div>

採取this JSFiddle. StackOverflow的片段更好看並不支持調整大小。

來源

2016-11-21 18:57:10 Zoe

我認爲你誤解了我的問題。我的HTML和CSS是第二個小提琴https：// jsfiddle。net/1Le63xk0/1/ 另一個是我如何需要菜單調整大小的示例。 –

顯然..... – Zoe

仍然。更改爲塊和內聯塊，它會工作 – Zoe

調整超級菜單li響應式地讓li平均減少

回答

相關問題