Как центрировать встроенный список по мере уменьшения экрана?

У меня есть хороший центрированный список, но по мере того, как экран становится меньше, дополнительные элементы перемещаются вниз (это правильно), но они перемещаются влево. Я хочу, чтобы они располагались по центру, как если бы экран был больше, но я просто не могу этого сделать.

Я пробовал два разных способа, но ни один из них не работает так, как я хочу.

Сначала я попробовал это:

.edit-hours .form .inputs .table ul {
    list-style: none;
    padding-top: 20px;
    max-width: 760px;
    margin: auto;
}

Затем я попробовал с flex-box:

.edit-hours .form .inputs .table ul {
    list-style: none;
    padding-top: 20px;
    max-width: 760px;
    margin: auto;
    display: flex;
    justify-content: center;
}

Это HTML-код:

<div class = "table">
    <ul>
        <li class = "day">
            <input class = "day-checkbox" type = "checkbox" id = "Mon">
            <label for = "Mon">Monday</label>
        </li>
        <li class = "day">
            <input class = "day-checkbox" type = "checkbox" id = "Tue">
            <label for = "Tue">Tuesday</label>
        </li>
        <li class = "day">
            <input class = "day-checkbox" type = "checkbox" id = "Wed">
            <label for = "Wed">Wednesday</label>
        </li>
        <li class = "day">
            <input class = "day-checkbox" type = "checkbox" id = "Thu">
            <label for = "Thu">Thursday</label>
        </li>
        <li class = "day">
            <input class = "day-checkbox" type = "checkbox" id = "Fri">
            <label for = "Fri">Friday</label>
        </li>
        <li class = "day">
            <input class = "day-checkbox" type = "checkbox" id = "Sat">
            <label for = "Sat">Saturday</label>
        </li>
        <li class = "day">
            <input class = "day-checkbox" type = "checkbox" id = "Sun">
            <label for = "Sun">Sunday</label>
        </li>
    </ul>
</div>

Я был бы признателен, если бы кто-нибудь мог мне помочь!

Можете ли вы опубликовать больше своего CSS, чтобы я мог настроить jsFiddle? Или вы можете настроить jsFiddle?

— 14.12.2020 17:38

Вот вам: jsfiddle.net/5gabd607/3

— 14.12.2020 17:46

html css

14.12.2020 17:31

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы не опубликовали свой CSS, но в основном вы можете применить display: inline к элементам li и центрировать их, используя text-align: center в контейнере ul:

.table ul {
  list-style: none;
  padding: 20px 0 0 0;
  max-width: 760px;
  text-align: center;
}

li {
  display: inline;
}

<div class = "table">
  <ul>
    <li class = "day">
      <input class = "day-checkbox" type = "checkbox" id = "Mon">
      <label for = "Mon">Monday</label>
    </li>
    <li class = "day">
      <input class = "day-checkbox" type = "checkbox" id = "Tue">
      <label for = "Tue">Tuesday</label>
    </li>
    <li class = "day">
      <input class = "day-checkbox" type = "checkbox" id = "Wed">
      <label for = "Wed">Wednesday</label>
    </li>
    <li class = "day">
      <input class = "day-checkbox" type = "checkbox" id = "Thu">
      <label for = "Thu">Thursday</label>
    </li>
    <li class = "day">
      <input class = "day-checkbox" type = "checkbox" id = "Fri">
      <label for = "Fri">Friday</label>
    </li>
    <li class = "day">
      <input class = "day-checkbox" type = "checkbox" id = "Sat">
      <label for = "Sat">Saturday</label>
    </li>
    <li class = "day">
      <input class = "day-checkbox" type = "checkbox" id = "Sun">
      <label for = "Sun">Sunday</label>
    </li>
  </ul>
</div>

Мне жаль. Я забыл об этом, но ваш ответ исправил это. Спасибо!

— 14.12.2020 17:52

14.12.2020 17:45

Я предполагаю, что вы в своем контейнере: display: flex; justify-content: center; flex-wrap: wrap;

Вот и все.

<div className = "flex justify-center flex-wrap bg-white text-white">
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className = "p-4 m-4 bg-pink-600 rounded-xl">text</div>
</div>

className — это JavaScript, class — атрибут HTML, в который добавляется имя класса CSS.

— 14.12.2020 17:52

О, конечно, извините, я проверил это в своем приложении для реагирования.

— 14.12.2020 17:54

Тогда, пожалуйста, либо используйте React в своем ответе (хотя это кажется ненужным), либо исправьте свой HTML в ответе, чтобы он был действительным; оставить все как есть - без объяснения причин - ваш ответ будет выглядеть ошибочным. Также помните, что комментарии недолговечны и могут быть удалены, поэтому нельзя полагаться на то, что вы оставляете свой комментарий, чтобы «объяснить» использование className вместо class.

— 14.12.2020 18:01

14.12.2020 17:49