Question

我已经搜索过并搜查了很多东西，但是我并没有充分掌握我正在做的事情，以便找出我出错的地方。

我有一个清单。

    <div class="topNav">
        <ul>
            <li><a href="MODL.html" title="HSE">HSE</a></li>
            <li><a href="MODL-PROC.html" title="PROCESSING">PROCESSING</a></li>
            <li><a href="MODL-UG.html" title="UNDERGROUND">UNDERGROUND</a></li>
        </ul>
        <br>
</div>

和css

.topNav {
justify-content: center;
text-align: center;
}

.topNav ul {
  background: #eee;
  list-style-type: none;
  margin: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  width: 80%;
}
.topNav a {
  color: #333;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1rem 2rem;
}

.topNav a:hover {
  background: #d4d4d4;
}

@media all and (max-width: 600px) {
 .topNav ul {
    flex-flow: column wrap;
    padding: 0;
  }
}

它完全符合我在Chrome中的要求。但IE11将每个列表项一个堆叠在另一个上面。到目前为止，我不能让它们在一行中运行。

CSS中没有任何其他因素影响ul / li＆只有text-align：center;和身高：100％设置在身体上。

非常感谢任何帮助或指导。

萨姆

Answer 1

我有同样的问题。

使用

display:inline-flex;

解决了。

显示：带列表导航IE11

1 个答案: