Question

我有一个嵌套的无序列表，我必须水平显示它们。这是一个链接
enter code here JSFiddle link Currenly它显示了不同行的第一个链接

但我希望显示为：主页新闻联系关于

Answer 1

您需要将显示设置为li a中的内联块，以允许它们水平堆叠。

li a {
    display: inline-block;
    color: white;
    text-align: left;
    padding: 16px;
    text-decoration: none;
}

要反转订单，请使用float:right;

Answer 2

如果你想要与链接中的相同..那么只需删除第二个ul标签，这是在新闻李

之前

希望这会对你有所帮助。

Answer 3

你的问题的答案是flexbox，如果元素有一个样式display: flex，你可以定义它里面每个项目的方向（水平/垂直）。试试这个：

.main_menu {
		display: flex;
		flex-direction: row;
		width: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
    display: inline-block;
		display: flex;
		flex-direction: row;
}

li a {
    display: block;
    color: white;
    text-align: left;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

<ul >
  <li class="main_menu"><a href="#home">Home</a>
    <ul>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </li>
</ul>

This link会解释很多关于flexbox的内容。

希望有所帮助

水平显示嵌套的无序列表

3 个答案: