css - 水平显示嵌套的无序列表

Question

我有一个嵌套的无序列表，我必须水平显示它们。这是一个链接
在此输入代码 JSFiddle link目前它在不同的行中显示第一个链接

但我想显示为:首页 新闻 联系方式 关于

Answer 1

您需要在 li a 中将显示设置为 inline-block，这将允许它们水平堆叠。

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

要颠倒顺序，请使用 float:right;