Question

我有一个杂乱无章的列表，显示在中心位置。我希望右侧的列表项与屏幕的右侧边缘之间的间距与左侧的相等。现在，整个列表向左倾斜。我想保持项目的宽度相同（使句子位于一行而不是两行）。如何在列表项之间添加更多间距以使列表项显得更均匀对齐？

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

作为旁注，建议您删除内联样式，并使用在元素上设置了类的样式表。它可以更好地阅读代码，因此您不必尝试使用! important

覆盖其他样式。

在两列之间的列表之间添加水平空间以使其居中

1 个答案: