水平菜單欄 - UL /李 - 巴頓懸停

在一個頁面中，我一直在使用UL /李水平菜單欄。它在自舉皮膚內。水平菜單欄 - UL /李 - 巴頓懸停

我這裏有一個代碼示例：https://jsfiddle.net/Lsgho7xe/

我嘗試使用DIV的，而不是在這裏：https://jsfiddle.net/afh6nox2/

與例子（一個或多個）上面，你會看到，對於「CNN」按鈕，文本不是垂直居中。

以前，我曾用表/表存儲單元顯示類型得到這個垂直對齊，但不得不改變，因爲按鈕都沒有崩潰正確的分辨率下降的代碼。

這樣一旦768px實現，按鈕摺疊成一個垂直列表;這對手機和臺式機都很有用。但是副作用是文本不再垂直對齊。

謝謝您的時間和精力..

<ul class="MenuLinks"> 
    <li> 
    <a href="https://www.google.com/culturalinstitute/beta/asset/architecture-tel-aviv-israel/jgHSJFEie5q9HQ" target="_blank">White City of Tel Aviv</a> 
    </li> 
    <li> 
    <a href="http://www.msn.com/en-us/weather/topstories/hottest-arctic-year-on-record-triggers-massive-ice-melt/ar-AAlvEi4?OCID=ansmsnnews11" target="_blank">Arctic Report Card NOAA</a> 
    </li> 
    <li> 
    <a href="http://www.cnn.com" target="_blank">CNN</a> 
    </li> 
    <li> 
    <a href="http://foxnews.com" target="_blank">Fox News</a> 
    </li> 
</ul> 

.MenuLinks { 
    display: flex; 
    justify-content: space-around; 
} 

ul.MenuLinks { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #294273; 
    width: 60%; 
    font-family: roboto; 
    font-variant: small-caps; 
    margin-bottom: 15px; 
    line-height: 24px; 
    -webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
    box-shadow: 0 8px 6px -6px black; 
} 

ul.MenuLinks li { 
    float: left; 
    margin-left: 0; 
    padding: 14px 30px; 
} 

ul.MenuLinks li a { 
    display: block; 
    color: white; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 1px 1px 2px #000; 
    font-size: 1.2em; 
} 

ul.MenuLinks li:hover:not(.active) { 
    background-color: #c88d0c; 
} 

@media screen and (max-width: 768px) { 
    ul.MenuLinks li { 
    float: none; 
    } 
    .MenuLinks { 
    display: inherit; 
    } 
}

來源

2016-12-15 user1424532

你想使CNN對準點點下來的時候菜單是水平？ –

Yes.Personally，它不會打擾我，但是當水平顯示菜單別人想要的一切的中心;默認顯示。 – user1424532

添加以下CSS和所有的菜單項目將在垂直模式對齊中心：

ul.MenuLinks li{ 
    margin:auto 0; 
}

希望這有助於。

來源

2016-12-15 18:59:23

沒想到那樣做會這樣集中它。它確實垂直居中。 – user1424532

沒想到那樣做會這樣集中它。它確實垂直居中。但是，當然，我要說的是「爲什麼現在CNN按鈕的上下都有空格」。 – user1424532

我們強加了保證金以保養汽車。這使得它垂直居中對齊。不是你想要的嗎？ –

水平菜單欄 - UL /李 - 巴頓懸停

回答

相關問題