相邻显示两个或多个无序列表答案

【问题标题】：Displaying Two Or More Unordered Lists Next To Eachother相邻显示两个或多个无序列表
【发布时间】：2012-12-15 21:23:40
【问题描述】：

首先，我要澄清一下，我并不是要内联显示列表项。我知道你可以通过使用 css 来做到这一点：

li { display: inline; }.

我想要做的是使用相对位置将两个 ul 放置在彼此旁边，但它也应该在没有相对位置的情况下工作。
我试过了

ul { display: inline; }

但它不起作用。它们不会出现在同一行。有趣的是，我尝试显示内联的所有其他块元素，例如 div、li 都可以正常工作。我已经做了很多实验，以确保元素的宽度可以彼此相邻，并将 ul 放在显示内联的 div 中。所以我的问题是， ul 是不可能内联显示的标签吗？

附言如果不可能，我可能会使用绝对位置将它们排列在一起，也许我也可以使用浮动，但浮动在我的网页布局中效果不佳。

【问题讨论】：

真的吗？这是什么浏览器？ This JSFiddle 在 Chrome 23 中为我工作。
火狐。不过，我还没有在任何其他浏览器中尝试过。
我刚刚查看了 jsfiddle.net/2r5ER，问题是我希望 lis 被阻止。只是 uls 应该是内联的。我尝试了您在 notepad++ 中提供的小提琴中的代码，它在 IE、firefox 和 chrome 中是相同的。问题的答案在我接受的 ori 发布的答案中。

标签： html html-lists inline css

【解决方案1】：

使用inline-block。见fiddle

ul { display: inline-block; }

附：我使用了@jmeas 评论中的小提琴，但假设您想在lis 上保留display: block

【讨论】：

是的，我想保留 li li s display: block
@ori 有没有办法让不同大小的列表彼此相邻而没有较短列表上方的空白？这是一个例子：jsfiddle.net/2r5ER/276（我指的是单词'HI'上方的空格-可以删除它吗？
@NickBraunagel 我只是偶然发现了这个问题，因为我问自己完全相同的问题。您是否碰巧找到了解决方案，但它们彼此相邻而没有空白？谢谢。
@MennoVanDijk 这是很久以前的事了，所以我的记忆力很差，但不幸的是，我什么也没找到 :(。我想我尝试以不同的方式重新排列列表
@NickBraunagel 我明白，很久以前。我设法使用 Bootstrap 来解决这个问题。耶技术:)。