html - 显示两个或多个彼此相邻的无序列表

标签 html html-lists inline css

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

li { display: inline; }.

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

ul { display: inline; }

但它不起作用。它们不会出现在同一条线上。有趣的是,我尝试以内联方式显示的所有其他 block 元素(如 div、li)都可以正常工作。我做了很多实验,以确保元素的宽度可以彼此相邻,并将 ul 放在显示内联的 div 中。所以我的问题是, ul 是不可能显示内联的标签吗?

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

最佳答案

使用内联 block 。参见 fiddle

ul { display: inline-block; }

附言我使用了@jmeas 评论中的 fiddle ,但假设你想在 lis

上保留 display: block

关于html - 显示两个或多个彼此相邻的无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13896331/

相关文章:

c++ - 如何通过保持性能来管理封装

css - CKEditor 4 - 内联编辑 - 自定义样式组合

javascript - 更改具有相同 id 的每个 div 元素的颜色,该 id 等于一些文本

html - 博客模板 : how to change the color of the border css

jquery - Owl Carousel ,制作自定义导航

javascript - 创建 AJAX 调用时 - 我需要请求什么样的数据?

带有 .index() 方法的 Python OrderedSet

css - 如何制作元素之间可变空间的 ul li css 菜单

html - 如何将 <li> 放在 <ul> 之上

c - 在 C 中将一个函数内联到另一个内联函数中