html - 在 2 列列表之间添加水平空间以使其居中

Question

我有一个偏离中心的无序列表。我希望右侧的列表项与屏幕右边缘的间距与左侧的列表项相等。现在，整个列表向左倾斜。我想保持元素的宽度相同(将句子放在一行而不是两行)。如何在列表项之间添加更多间距以使列表项看起来更均匀对齐？

SEE THE IMAGE

.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>

Answer 1

你接触过flexbox吗？看起来这可能是您想要完成的目标的合适答案。

通过将 .fin_aid_list 设置为 display: flex，您可以将子项设置为均匀间隔。为了使所有子元素一起左右对齐，使用简写 flex 使它们大小相同，并将 flex-bias 设置为相同大小.

检查这个JSFiddle在这里。

作为旁注，建议您删除内联样式并使用在元素上设置类的样式表。它可以更好地阅读您的代码，然后您就不必尝试使用 覆盖其他样式!重要