gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:59:06 25 4
gpt4 key购买 nike

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

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>

最佳答案

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

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

检查这个JSFiddle在这里。

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

关于html - 在 2 列列表之间添加水平空间以使其居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52781498/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com