html - 堆栈显示 :block, 但保留内部文本的宽度 - 这可能吗？

Question

我正在尝试创建一个导航列表，其中所有列表项都按照 display:block 堆叠在一起，但是它们的宽度受其中文本宽度的影响，按照 display:inline .

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

以下是我正在努力实现但无法实现的目标: 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;
}

See it live