Текст элемента списка неправильно переполняет подсписок

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

Первое, что я заметил, это то, что тег стоит перед тегом

В настоящее время я не могу попробовать, но если вы хотите, чтобы значки появлялись перед текстом, я бы упорядочил теги таким же образом. Не уверен, что это решит проблему.

Отредактировано, чтобы добавить: я просто запускаю быстрый тест. Изменение

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

казалось, решил твою проблему (если я правильно понял).

Answer 2

Если я правильно понимаю, чего вы хотите достичь, тогда вы должны просто удалить float: left; из .main-menu .actions:

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

Это желаемый результат?

Answer 3

С помощью 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, чтобы текст ссылки всегда был встроенным, а не помещался в меню «действий».

Полный 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 шириной списка «действий» и последующего присвоения списку «действий» отрицательного левого поля того же значения.