Добавление горизонтального пространства между списком в 2 столбца, чтобы сделать его центром - PullRequest
Новая
       19

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

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

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

СМОТРЕТЬ ИЗОБРАЖЕНИЕ 

.fin_aid_container {
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
}

.fin_aid_list {
  column-count: 2;
}

<div style="display:inline-block; width:100%; margin:0px auto; padding-right:20px; "class="">
    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 40px; padding-left: 40px; padding-top: 10px; padding-bottom: 10px;"><![endif]-->
    <div class="fin_aid_container" style="padding-bottom: 10px; padding-left:20px; padding-right:20px;">
      <div style="color:#000000; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align:left; font-size:14px; line-height:21px;">
        <ul class="fin_aid_list" style="display:inline-block;">
          <li>State and federal student aid</li>
          <li>Scholarships and grants</li> 
          <li>Employer reimbursement</li>
          <li>Military and veteran benefits</li> 
        </ul>
      </div>
    </div>
    <!--[if mso]></td></tr></table><![endif]-->
</div>

1 Ответ

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

Вы баловались с flexbox?Похоже, что это может быть подходящим ответом для того, чего вы пытаетесь достичь.

, установив для .fin_aid_list значение display: flex, вы можете затем установить равные расстояния между дочерними элементами.Дочерние элементы, чтобы все они были выровнены справа и слева, должны сделать их одинаковыми по размеру с сокращением flex и установить для flex-bias одинаковый размер.

Установите этот флажок JSFiddle здесь.

В качестве дополнительного примечания предлагается удалить встроенный стиль и использовать таблицу стилей с классами, установленными на ваших элементах.Это улучшает чтение вашего кода, и тогда вам не нужно пытаться переопределить другой стиль с помощью ! important

...