html - 用于中心对齐导航的内联 block 在 IE 11+ 中不显示水平

Question

因此，我尝试在固定宽度的父容器中创建一个居中的水平菜单。我将 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;
      }

有什么想法吗？谢谢!

Answer 1

尝试:

.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 内容居中。