html - 元素符号列表与 css 属性/值列不一致 : 2;

Question

我有一个元素符号列表，我使用以下方法将其分为两列:

但是，列的起始高度似乎不同(请参阅附图，顶部画有红线)。有没有比上面更好的方法将列表分成两列？

.hand-bullet-list ul{
    list-style-type: none;
    margin-left: 0px;
}

.hand-bullet-list ul li{
    list-style: none;
    position: relative;
    padding: 0 0 22px 40px;
	margin-bottom: 20px;
}

.hand-bullet-list ul li::before{
    background: url(https://jeremybullocksafeschools.com/wp-content/uploads/3.png) no-repeat;
    content: "";
    width: 40px;
    height: 42px;
    position: absolute;
    left: 0px;
    top: 0px;
}


.hand-bullet-list.bullet-list-two-columns ul,
.hand-bullet-list.bullet-list-two-columns ul{
    columns: 2;
}

<div class="hand-bullet-list bullet-list-two-columns"><div class="vc_column-inner  vc_custom_1552327659243"><div class="wpb_wrapper">
	<div class="wpb_text_column ">
		<div class="wpb_wrapper">
			<ul>
<li>Exhibitors must <a href="https://jeremybullocksafeschools.com/register/">complete the online registration form</a>.</li>
<li>Exhibitor materials can be shipped to the Copper King Hotel for arrival no later than Monday, August 19th (see contract for details).</li>
<li>Exhibit registration and set-up will occur on Monday, August 19th after 6:00 pm at the Copper King Hotel.</li>
<li>Company representatives must be present at the booth during all hours when exhibits are open to the public.</li>
<li>Exhibits must be dismantled and removed by 3:00 pm on Wednesday, August 21st.</li>
<li>Please provide a 200-word summary of your company for inclusion in the Summit’s WEB materials and your company will be listed in the official Summit program. Announcements concerning the importance of the exhibits will be made during the program.</li>
<li>Standards for exhibiting are provided in the Exhibitor Contract.</li>
</ul>

		</div>
	</div>
</div>

我希望两列在顶部对齐。

Answer 1

要将您的内容分成两列，先取 ul 的总高度，然后除以 2，导致一些底部填充被转移到右列(在某些分辨率下，您甚至可以看到手掌的底部)图片裁剪后在右栏的最顶部偷看)。

为防止出现这种情况，您应该通过将 li css 更改为以下内容来避免破坏子元素内部:

.hand-bullet-list ul li{
    list-style: none;
    position: relative;
    padding: 0 0 22px 40px;
    margin-bottom: 20px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}