0

Хочу разместить содержимое блока по центру, допустим это горизонтальное меню, как сделать чтобы не указывать ширину блоков, а они подстраивались автоматом под ширину содержимого

то есть:

<ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 2</a>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Item 4</a>
        </li>
    </ul>

Что бы не указывать ширину ни у ul ни у блоков li

2 ответа 2

4

ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
ul li{
    list-style: none;    
}
ul a{
    padding: 5px;
    display: block;
    border: 1px solid #ccc;
}
ul a:hover{
    background: #000;
    color: #fff;
}
<ul>
    <li>
        <a href="#">Item 1</a>
    </li>
    <li>
        <a href="#">Item long text 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
    </li>
    <li>
        <a href="#">Item 4</a>
    </li>
</ul>

6
  • а flex это новое что то? как оно работает?
    – unknown
    28 авг 2017 в 12:21
  • да новое, но уже имеет хорошую поддержку браузеров - caniuse.com/#feat=flexbox
    – soledar10
    28 авг 2017 в 12:23
  • html5.by/blog/flexbox
    – soledar10
    28 авг 2017 в 12:25
  • Ну, назвать flex "новым" уже сложно, главное что отталкивает - не поодерживается на ie9 (на практике не такой уж и редкий/старый браузер). По этому всегда когда использую flex стараюсь делать проверку и альтернативную верстку, если проверка не пройдена. Да и как правило без flex'ов можно обойтись 28 авг 2017 в 13:08
  • @MedvedevDev . все зависит от требований по кроссбраузерности. Если ie9 не нужен, используйте flex. + ie9 можно отдельно задать стили
    – soledar10
    28 авг 2017 в 13:17
0

div {
  padding: 10px;
  background-color: #666;
  text-align: center; // центруем строчные элементы
}

ul {
  display: inline-block; /* правращаем в строчный (строчноблочный) элемент,
  что бы сработало выравнивание и блок ужался до размеров контента */
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: center;
  text-align: left; // возвращаем стандартно позиционирование текста у левого края
}

li {
  display: inline-block;
  vertical-align: center;
  padding: 4px;
  background-color: #fff;
}
<div>
  <ul>
      <li>
          <a href="#">Item 1</a>
      </li>
      <li>
          <a href="#">Item 22</a>
      </li>
      <li>
          <a href="#">Item 333</a>
      </li>
      <li>
          <a href="#">Item 4444</a>
      </li>
  </ul>
</div>

4
  • а ширину элемента li обязательно указывать? они же разные могут быть по ширине
    – unknown
    28 авг 2017 в 11:40
  • не, не обязательно, задал для красоты (плюс сразу не глянул, что у них есть контент внутри и он и так их раздвинет, убрал) 28 авг 2017 в 11:41
  • Все что нужно понимать в этом варианте - первые 2 свойства с комментариями, остальное просто "стили для красоты" 28 авг 2017 в 11:43
  • Да все классно) спасибо большое
    – unknown
    28 авг 2017 в 11:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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