Question

所以，我试图在固定宽度的父容器中创建一个居中的水平菜单。我将ul和li元素设置为显示为内联块，将父元素设置为text-align和center。此方法适用于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保持为块元素。通过使其成为内联块，它的内容宽度也只是内联元素，这意味着它只会从左边填充。通过使其成为一个块，它将填充整行，然后文本对齐中心将使内联块内容居中。

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

1 个答案: