因此,我尝试在固定宽度的父容器中创建一个居中的水平菜单。我将 ul 和 li 元素设置为显示为内联 block ,并将父元素设置为文本对齐和居中。此方法在FF和Chrome中有效,但在IE中,列表居中,但垂直显示。这是 IE 11。
这是分割:
.menu {
width: 700px;
height: 35px;
background-color: #767676;
text-align:center;
}
.menu ul {
list-style:none;
display:inline-block;
padding:0px;
margin:0px; }
.menu li {
display:inline-block;
background-color: #B9E9A8;
width: 120px;
height: 35px;
text-align: center;
color:#4F4F4F;
font-size:18px;
line-height:35px;
}
.menu li a {
color:#3A3A3A;
text-decoration:none;
display:block;
}
.menu li a:hover {
color:#fff;
background-color:#507B28;
}
有什么想法吗?谢谢!
最佳答案
尝试:
.menu {
width: 700px;
height: 35px;
background-color: #767676;
text-align:center;
}
.menu ul {
list-style:none;
display:block;
text-align: center;
padding:0px;
margin:0px; }
.menu li {
display:inline-block;
background-color: #B9E9A8;
width: 120px;
height: 35px;
text-align: center;
color:#4F4F4F;
font-size:18px;
line-height:35px;
}
.menu li a {
color:#3A3A3A;
text-decoration:none;
display:block;
}
.menu li a:hover {
color:#fff;
background-color:#507B28;
}
我所做的就是让 ul 成为一个 block 元素。通过将其设为内联 block ,它只会具有其内容的宽度,这些内容也是所有内联元素,这意味着它将从左侧填满。通过将其变成一个 block ,它将填充整行,然后 text-align center 将使行内 block 内容居中。
关于html - 用于中心对齐导航的内联 block 在 IE 11+ 中不显示水平,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29756284/