HTML/CSS中带div的水平（内联）列表

我正在尝试构建一个简单的水平列表，其中每个列表项都是一个div，我希望它们彼此相邻。但是，当我尝试使用下面的代码时，div会在单独的行中结束。以下是我得到的：

HTML:

我试着给我的div设置一个最大宽度和一个宽度，但这也不起作用。基本上，它们在单独的行上显示时没有项目符号

---

如果您能帮我解决这个问题，我们将不胜感激，谢谢

尝试

浮动：左在列表项上，可能类似于：

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

此外，请确保为ul指定一个高度，因为元素将脱离流，这意味着ul将没有任何高度。您还可以使用clearfix来修复此行为：

.clear:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear
{
    display: inline-block;
}

html[xmlns] .clear
{
    display: block;
}

* html .clear
{
    height: 1%;
}

您只需将
class=“clear”
添加到
。谷歌clearfix css获取更多信息：）

使
内联而将
保留为块是您的问题

或者，如果要控制大小或边距，您可能需要
的
内联块

您可能还对本演示感兴趣：

我不知道为什么您的
中有
，但我认为您有自己的原因。
列表项中的每个div默认显示为一个块。同时以内联方式显示它们，应该可以正常工作

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

CSS

HTML


正文
正文
正文

所以我最终只是将#navlist li设置为显示：inline块。工作得很好，非常感谢！
.clear:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear
{
    display: inline-block;
}

html[xmlns] .clear
{
    display: block;
}

* html .clear
{
    height: 1%;
}

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

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

* {
    margin: 0;
    padding: 0;
}
ul {
    background: #48D;
    height: 35px;
    line-height: 25px;
    width: 300px;
}
li {
    float: left;
    list-style-type: none;
    margin: 5px 0 0 5px;
}
li div {
    background: #6AF;
    padding: 0 5px;
}

<ul>
    <li><div>Text</div></li>
    <li><div>Text</div></li>
    <li><div>Text</div></li>
</ul>