列表项文本不正确地溢出子列表

Question

我使用以下HTML创建了一个站点地图：

<ul class="main-menu">
    <li>
        <div>
            <a href="#">Menu Item 1</a>
            <ul class="actions">
                <li>
                    <a
                      title="Collapse"
                      href="#"
                      class="icon icon-bullet-toggle-minus"
                    >Collapse</a>
                </li>
                <li>
                    <a
                      title="Add to Favourites"
                      href="#"
                      class="icon icon-award-star-add"
                    >Add to Favourites</a>
                </li>
            </ul>
        </div>
        <ul class="child-nodes">
            <li>
                <div>
                    <a href="#">Menu Item 1's First Child</a>
                    <ul class="actions">
                        <li>
                            <a
                              title="Open"
                              href="#"
                              class="icon icon-page"
                            >Open</a>
                        </li>
                        <li>
                            <a
                              title="Add to Favourites"
                              href="#"
                              class="icon icon-award-star-add"
                            >Add to Favourites</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <div>
                    <a href="#">A menu item with a really long name that is
                    eventually going to wrap over and break my styling</a>
                    <ul class="actions">
                        <li>
                            <a
                              title="Open"
                              href="#"
                              class="icon icon-page"
                            >Open</a>
                        </li>
                        <li>
                            <a
                              title="Add to Favourites"
                              href="#"
                              class="icon icon-award-star-add"
                            >Add to Favourites</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
    <li>
        <div>
            <a href="#">Menu Item 2</a>
            <ul class="actions">
                <li>
                    <a
                      title="Expand"
                      href="#"
                      class="icon icon-bullet-toggle-plus"
                    >Expand</a>
                </li>
                <li>
                    <a
                      title="Add to Favourites"
                      href="#"
                      class="icon icon-award-star-add"
                    >Add to Favourites</a>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div>
            <a href="#">Menu Item 3</a>
            <ul class="actions">
                <li>
                    <a title="Open" href="#" class="icon icon-page">Open</a>
                </li>
                <li>
                    <a
                      title="Add to Favourites"
                      href="#"
                      class="icon icon-award-star-add"
                    >Add to Favourites</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

和下列CSS：

.main-menu {
    list-style: none;
    padding: 0;
    width: 405px;
}

.main-menu div {
    padding: 5px;
}

.main-menu div a {
    color: #036;
    padding: 5px;
    padding-left: 0;
    text-decoration: none;
}

.main-menu .actions {
    float: left;
    margin: 0;
    margin-right: 3px;
    padding: 0;
}

.main-menu .actions li {
    display: inline;
    list-style: none;
}

.main-menu .actions a {
    outline: none;
    padding: 0;
    text-indent: -9999px;
}

.main-menu .child-nodes {
    list-style: none;
    padding-left: 41px;
}

.main-menu .space {
    margin-top: 16px;
}

问题是，一旦菜单项的文本比菜单的405像素宽更宽，项目就不再正确包装。

文本不是在“操作”列表下流动的，而是在“操作”列表上流动的。

我想要一些类似的东西：

• 一些图标项目文本 包裹着

但我得到的是：

• 包装的项目文本 周围的一些图标

如果您想看到实际问题，下面是这个问题的一个例子。

有什么想法吗？

Answer 1

在RegDwight和的帮助下，我想我已经解决了这个问题。

第一步是交换链接和周围的“操作”列表，使其现在显示为：

<div>
    <ul class="actions">
        <li>
            <a class="icon icon-page" href="#" title="Open">Open</a>
        </li>
        <li>
            <a
              class="icon icon-award-star-add"
              href="#"
              title="Add to Favourites"
            >Add to Favourites</a>
        </li>
    </ul>
    <a href="#">Menu Item</a>
</div>

从那时起，它只是稍微调整CSS，使链接文本始终是内联的，而不是包装在“动作”菜单下。

完整的CSS如下：

.main-menu {
    list-style-type: none;
    padding: 0;
    width: 405px;
}

.main-menu div {
    padding: 5px 5px 5px 46px;
}

.main-menu div a {
    color: #036;
    text-decoration: none;
}

.main-menu .actions {
    float: left;
    margin: 0 3px 0 -41px;
    padding: 0;
}

.main-menu .actions li {
    display: inline;
    list-style-type: none;
}

.main-menu .actions a {
    outline-style: none;
    text-indent: -9999px;
}

.main-menu .child-nodes {
    list-style-type: none;
    padding-left: 41px;
}

.main-menu .space {
    margin-top: 16px;
}

这只是将容器div按“操作”列表的宽度填充，然后给“操作”列表以相同值的负左边距填充的情况。

Answer 2

如果我正确理解了您想要实现的目标，那么您必须将float: left;从.main-menu .actions中删除。

.main-menu .actions {
    margin: 0;
    margin-right: 3px;
    padding: 0;
}

这是预期的结果吗？

Answer 3

我注意到的第一件事是标签在标签之前。你试过颠倒标签的顺序吗？

我目前无法尝试它，但如果您希望图标出现在文本之前，我会以同样的方式订购标签。但不确定这是否能解决这个问题。

编辑补充:我只是运行一个快速测试。改变

<A href="http://robertwhittaker.com/example/#">A menu item with a really long name that is
eventually going to wrap over and break my styling</A>
<UL class="actions">
  <LI>
    <A title="Open" href="http://robertwhittaker.com/example/#" class="icon icon-page">Open</A>
  </LI>
  <LI>
    <A title="Add to Favourites" href="http://robertwhittaker.com/example/#" class="icon icon-award-star-add">Add to Favourites</A>
  </LI>
</UL>

为了..。

<UL class="actions">
  <LI>
    <A title="Open" href="http://robertwhittaker.com/example/#" class="icon icon-page">Open</A>
  </LI>
  <LI>
    <A title="Add to Favourites" href="http://robertwhittaker.com/example/#" class="icon icon-award-star-add">Add to Favourites</A>
  </LI>
</UL>
<A href="http://robertwhittaker.com/example/#">A menu item with a really long name that is
eventually going to wrap over and break my styling</A>

似乎解决了你的问题(如果我正确理解的话)。