Список маркеров неравномерен со столбцами css свойство / значение: 2; - PullRequest
Новая
       25

Список маркеров неравномерен со столбцами css свойство / значение: 2;

0 голосов
/ 27 марта 2019

У меня есть маркированный список, который я разделил на два столбца, используя:

Однако столбцы, похоже, не начинаются с одинаковой высоты (см. Прикрепленное изображение с красной линией, нарисованной вверху). Есть ли лучший способ разбить список на два столбца, чем выше? 

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

Я бы хотел, чтобы две колонки были выровнены сверху.

enter image description here

1 Ответ

1 голос
/ 27 марта 2019

Чтобы разделить ваш контент на два столбца, берется общая высота ul, а затем делится на 2, в результате чего некоторые нижние отступы переносятся в правый столбец (в некоторых разрешениях вы даже можете видеть нижний бит ладони). изображение обрезается, заглядывая в самый верх вашей правой колонки).

Чтобы предотвратить это, вы должны избегать взлома дочерних элементов, изменив вашу лицензию на следующее: 

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