带有div的HTML/CSS中的水平(内联)列表

Question

我正在尝试构建一个简单的水平列表,其中每个列表项都是div,我希望它们全部彼此相邻.当我尝试使用下面的代码时,div最终会分开.这是我得到的:

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;
}

我试图给我的div一个最大宽度和宽度,但这也不起作用.基本上,它们在单独的线条上没有子弹点出现.

一些帮助解决这个问题将非常感谢,谢谢!!

Answer 1

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

<li>在离开<div>as块时进行内联是你的问题.

或者,你可能想inline-block的<li>,如果你将要控制规模或利润.

我不确定你为什么在你的<div>内心<li>,但我认为你有你的理由.