Разбить адаптивный список посередине

У меня есть адаптивное меню, представленное в виде неупорядоченного списка. При больших размерах он встроен и выглядит красиво: Исходный макет Но когда окно сжимается, оно ломается и выглядит неуклюже: Отзывчивый результат В идеале я бы хотел, чтобы разбить пополам, когда он переполняется, например: Идеальный результат Использование <wbr> в списке, похоже, ничего не дает, и у меня нет идей. Этот вопрос/решение, предлагающий использовать inline-block, хорошо работает с абзацами, но не работает со списками.

Вот пример CodePen, демонстрирующий неисправность:
http://codepen.io/anon/pen/xVoLov?editors=1100


html css responsive
person JeffThompson    schedule 19.05.2016    source источник
comment
Да, хороший вопрос - он должен сломаться пополам, когда переполнится. Я обновлю вопрос.   -  person JeffThompson    schedule 20.05.2016
comment
Возможный дубликат html (+css): обозначает предпочтительный место для разрыва строки   -  person 4castle    schedule 20.05.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете изменить ширину с помощью медиа-запросов на 33% каждого li

* {
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#wrapper {
  width: 90%;
  max-width: 700px;
  margin: 30px auto;
  padding: 30px;
  border: 1px solid black;
  overflow: hidden;
  text-align: center;
}
li {
  float: left;
  padding: 0 1em;
}
@media screen and (max-width: 768px) {
  li {
    width: 33%;
  }
}
@media screen and (max-width: 480px) {
  li  {
    width: 50%;
  }
}
<div id="wrapper">
  <ul>
    <li>Thing One</li>
    <li>Thing Two</li>
    <li>Thing Three</li>
    <!-- ideally, break here -->
    <li>Thing Four</li>
    <li>Thing Five</li>
    <li>Thing Six</li>
  </ul>
</div>

person Nenad Vracar    schedule 19.05.2016
comment
Это действительно хорошее простое решение. Но (я думаю) это работает только для списков из 3 или 6 элементов (т.е. выглядит странно, если список состоит из 4 элементов). Может есть более универсальное решение? - person JeffThompson; 20.05.2016
comment
@JeffThompson Я не уверен, что ты имеешь в виду под more universal solution? - person Nenad Vracar; 20.05.2016

arrow_upward
1
arrow_downward

Вы можете попробовать с display:flex.

Вот отличная статья на эту тему: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox прекрасен, но имеет проблемы со старыми браузерами (Internet Explorer...). Вы можете проверить совместимость здесь: http://caniuse.com/#feat=flexbox

person Alejandro Garrido    schedule 19.05.2016