列表项文本错误地溢出子列表

时间：2010-01-27 09:16:48

标签： css

我使用以下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像素宽度宽，该项就不再正确包装。

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

我希望有类似的东西：

  • [某些图标] [另一个图标]项目文字

但我得到了：

  • 包装
    的项目文本 <某些图标] [另一个图标]围绕

如果您希望看到问题的实际效果，请点击此处an example of the issue。

有什么想法吗？

3 个答案:

答案 0 :(得分：1)

如果我理解了您想要达到的目标，那么您只需从float: left;移除.main-menu .actions：

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

这是理想的结果吗？

答案 1 :(得分：1)

我注意到的第一件事是＆lt; a＆gt;标签出现在＆lt; ul class =“actions”＆gt;之前标签。您是否尝试过颠倒标签的顺序？

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

编辑补充：我只是进行快速测试。改变

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

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

答案 2 :(得分：0)

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

第一步是交换链接和“操作”列表，以便它现在显示为：

<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的情况，以便链接文本始终是内联的而不是包裹在“actions”菜单下面。

完整的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;
}

只是通过“actions”列表的宽度填充容器div，然后给“actions”列表一个相同值的负左边距。

相关问题
最新问题