水平菜单栏 - 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 /李 - 巴顿悬停

回答

相关问题