1

#mainmenu
{
    border: 1px solid black;
    widtd: 400px;
}
#mainmenu ul li
{
    list-style-type: none;
    display: inline;
    padding: 5px;
}
<div id="mainmenu">
    <ul>
        <li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li>
    </ul>    
</div>

Вопрос

Почему на странице отображается данная строка без переноса?

Ожидание

Элементы списка должны переноситься на другую строку

1
  • 2
    длинные беспробельные слова не переносятся, видимо inline-овский список считается длинным беспробельным словом, но это всего лиш предположение
    – Spectre
    10 мая 2012 в 15:42

2 ответа 2

1

Потому что у вас стоит display: inline;

4
  • хорошо, тогда как сделать так, чтобы список был в строчку и при этом переносился? 10 мая 2012 в 15:42
  • Вы же противоречите себе. Вам нужно списком или в строчку? Как понять переносился?
    – acidernt
    10 мая 2012 в 15:43
  • И что за свойство widtd? width правильно
    – acidernt
    10 мая 2012 в 15:44
  • Вопрос уже решен, Spectre оказался прав, надо было просто список разбить на части 10 мая 2012 в 15:46
0

Ответ

@Spectre дал верный ответ в комментарии к вопросу.

Длинные беспробельные слова не переносятся, видимо inline-овский список считается длинным беспробельным словом.

Первоначальный вариант

<div id="mainmenu">
    <ul>
        <li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li>
    </ul>    
</div>

Правильный вариант

<div id="mainmenu">
    <ul>
        <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li><li>1</li>
    </ul>    
</div>
2
  • Пожалуйста, сделайте ваши примеры воспроизводимыми
    – user262779
    9 ноя 2018 в 10:41
  • 1
    @Vlad Spirin, сейчас нет возможности. Я создал отдельный вопрос для решения проблемы
    – Kyper
    9 ноя 2018 в 13:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.