html - 像 display:block 这样的堆栈，但在里面保留了文本的宽度 - 这可能吗？

Question

我正在尝试创建一个导航列表，其中所有列表项堆叠在一起，根据显示：块，但它们的宽度受其中文本宽度的影响，根据显示：内联。

似乎我只能选择一个或另一个 - 我尝试将 li 和 li a 设置为块/内联/内联块的各种组合，但它不起作用。要么我的列表项的宽度都相同，要么它们彼此相邻而不是彼此重叠。

这是我想要实现但不能实现的目标：http: //i39.tinypic.com/280t5s0.png

这可能吗？我觉得它真的应该是，但我完全被难住了，搜索并没有出现太多。

任何帮助将非常感激！

谢谢和最良好的祝愿，

艾玛

Answer 1

HTML

<ul>
    <li>Item 1</li>
    <li>Long Item 2</li>
    <li>Longer Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

CSS

li {
    border: 1px solid black;
    display: inline-block;
    float: right;
    clear: right;
}

现场观看