По центру и по горизонтали выровняйте два деления, а затем выровняйте по вертикали на меньшем экране - PullRequest
Новая
       5

По центру и по горизонтали выровняйте два деления, а затем выровняйте по вертикали на меньшем экране

0 голосов
/ 05 октября 2018

У меня в основном два параллельных списка, и я хочу, чтобы они были центрированы внутри их контейнера.Я не могу скопировать весь код, окружающий div, потому что перед ним миллионы пробелов, поскольку HTML-файл очень большой и запутанный.Копирование / вставка не выполняется правильно.

enter image description here

<div style="padding-right:0px; padding-left:0px; overflow:auto; width: 100%; margin:0 auto; max-width:400px; display:inline-block;">
  <div style="float:left;">
    <ul>
      <li>On-demand tutoring</li>
      <li>Library systems</li>
      <li>Dedicated support teams</li>
    </ul>
  </div>

  <div style="float:right;">
    <ul>
      <li>Counseling</li>
      <li>Technical support</li>
    </ul>
  </div>

</div>

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Вы можете сохранить список в одном элементе ul и использовать на нем column-count: 2;, чтобы разбить его на столбцы.Центрирование выполняется с помощью margin: 0 auto; на контейнере.Я удалил ненужный div между ними и переместил встроенный CSS во внешнюю таблицу стилей.

И использовал медиазапрос, чтобы установить column-count в 1 для небольших экранов: 

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 400px;
}

.list1 {
  column-count: 2;
}

@media screen and (max-width: 400px) {
  .list1 {
    column-count: 1;
  }
}
<div class="container">
  <ul class="list1">
    <li>On-demand tutoring</li>
    <li>Library systems</li>
    <li>Dedicated support teams</li>

    <li>Counseling</li>
    <li>Technical support</li>
  </ul>
</div>
0 голосов
/ 05 октября 2018 
<div style="padding-right:0px; padding-left:0px; overflow:auto; width: 100%; margin:0 auto; max-width:400px; display:inline-block;">
    <div style="float:left;text-align:center;">
        <ul>
            <li>On-demand tutoring</li>
            <li>Library systems</li>
            <li>Dedicated support teams</li>
        </ul>
    </div>

    <div style="float:right;text-align:center;">
        <ul>
            <li>Counseling</li>
            <li>Technical support</li>
        </ul>
    </div>
</div>

Измените свою текущую лань на это, этого должно быть достаточно для того, что вам нужно.

...