0

我有一个列表，其中每个项目都有一个子列表。为了给它们设置样式，我使用了 CSS。

<ul class="left">
    <li class="itemc">Item 1
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 2
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 3
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
    <li class="itemc">Item 4
        <ul class="subitem">
            <li>Subitem1</li>
            <li>Subitem2</li>
            <li>Subitem3</li>
            <li>Subitem4</li>
        </ul>
    </li>
</ul>

整个脚本可以在这里找到

我的问题是当我按下主列表中的一个项目时，会显示子列表，但主列表中的其他项目会一个接一个。我应该如何或修改什么以使其工作？我的意思是，当单击一个项目时，要显示的子列表以及要与子列表末尾对齐的下一个项目？

4

2 回答 2

1

.left li向您的类添加两个附加属性：

.left  li {
    float: left;
    clear: left;
}

更新了 jsfiddle

于 2013-01-23T16:54:12.797 回答
0

问题来自这样一个事实，即当子项目打开时，项目位置没有改变。他们呆在同一个地方。

来自 Firefox 的 3D 视图

正如您在此处看到的（来自 Firefox 的 3D 视图），第 3 和第 4 项仍保留其原始位置（单击第 2 项），并且子项位于它们上方。

子项实际上不被视为在项中。因此，当它被显示时，其他项目看不到它们上方的项目有任何变化，并保持在同一个地方。但是文本会受到子菜单的影响。所以它被放在它的末尾。这一切都归功于子项float: left;。

要解决这个问题，您只需要在 CSS中添加clear: both;或。clear: left;.left li

编辑：似乎我迟到了对不起......

小提示：您应该避免使用.left liafter .left .submenu li，它可能会替换您之前放置的一些属性。

于 2013-01-23T17:06:44.060 回答