Html 显示两个或更多彼此相邻的无序列表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13896331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:24:08  来源:igfitidea点击:

Displaying Two Or More Unordered Lists Next To Eachother

htmlhtml-listsinlinecss

提问by Chakotay

First I'll clarify that I'm not trying to display list items inline. I know you can do that by using css:

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

li { display: inline; }.

li { display: inline; }.

What I'm trying to do is position two ul's next to eachother using a relative position, but it should work without the relative position also.
I've tried

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

ul { display: inline; }

ul { display: inline; }

but it doesn't work. They won't appear on the same line. Funny since every other block element that I've tried to display inline like, div, li works just fine. I've done a lot of experimenting with making sure that width of the elements is something that could fit next to eachother and putting the ul's inside div's that display inline. So my question is, is ul a tag that is impossible to display inline?

P.S. If it is impossible I'll probably go with a absolute position to line them up together, maybe I could use float also but float would not work well in my webpage layout.

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

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

回答by ori

Use inline-block. See fiddle

使用inline-block. 见小提琴

ul { display: inline-block; }

P.S. I used the fiddle from @jmeas's comment, but assumed you wanted to keep display: blockon the lis

PS我使用@ jmeas的评论小提琴,但假设你想保持display: blockli小号