项目符号列表不均匀 css property/value 列：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;
}

项目符号列表不均匀 css property/value 列：2；

Bullet list is uneven with css property/value columns: 2;

html

css

wordpress

css-multicolumn-layout