使用div的HTML / CSS中的水平（行内）列表 [英] Horizontal (inline) list in HTML/CSS with divs

问题描述

我试图构建一个简单的水平列表，其中每个列表项是一个div，我希望他们都坐在一起。当我尝试使用下面的代码虽然，divs最终在单独的行。这是我有：

I am trying to build a simple horizontal list, where each list item is a div and I want them all to sit next to one another. When I try to use the code below though, the divs end up on separate lines. Here's what I've got:

HTML：

<ul id="navlist">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>

CSS：

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

我尝试给我的divs最大宽度和宽度，也不工作。基本上，他们在不同的行显示没有项目符号。

I have tried to give my divs a max width and a width but that doesn't work either. Basically, they show up without bullet points on separate lines.

一些帮助修复这将非常感谢，谢谢!!

Some help on fixing this would be very appreciated, thanks!!

推荐答案

#navlist li { display:inline }
#navlist div { display:inline }

使< li>

或者，您可能需要 inline-block

Alternatively, you may want inline-block for the <li> if you are going to be controlling sizes or margins.

code> 您可能还对此演示感兴趣： http://phrogz.net/JS/ul2menu/purecss_testsuite.html

我不知道为什么你的< div> >< li> ，但我认为您有理由。

I'm not sure why you have <div> inside your <li>, but I presume you have your reasons.

这篇关于使用div的HTML / CSS中的水平（行内）列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！