CSS li列有边框底部的bug？

Question

我有一个无序列表，column-count: 2;样式应用于<ul>，border-bottom: solid 1px #ccc;项<li>。{/ p>

.artist-dates ul {
  list-style: none;
  list-style-type: none;
  column-count: 2;
  margin: 0;
}

.tour-date-item {
  line-height: 28px;
  border-bottom: 1px #ccc solid;
  padding: 5px 0;
  margin: 0;
}

<ul class="tour-dates">
  <li class="tour-date-item">
    <div class="tour-date-date">07/19/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Ryman Auditorium</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">07/22/2017</div>
    <div class="tour-date-city-state">London, UK</div>
    <div class="tour-date-venue">O2 Arena</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/21/2017</div>
    <div class="tour-date-city-state">Los Angeles, CA</div>
    <div class="tour-date-venue">House of Blues</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/27/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Bluebird Cafe</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">12/04/2017</div>
    <div class="tour-date-city-state">Austin, TX</div>
    <div class="tour-date-venue">SXSW</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
</ul>

在前端，第一列中最后一个<li>的边框将推到下一列的顶部。像这样：

所以只有一个<li>项的部分如下所示：

知道怎么解决这个问题吗？谢谢！

Answer 1

使用以下内容预防breaks inside .tour-date-item

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

示例：

.tour-dates {
  list-style: none;
  list-style-type: none;
  -wekbit-column-count: 2;
  column-count: 2;
  margin: 0;
}

.tour-date-item {
  line-height: 28px;
  border-bottom: 1px #ccc solid;
  padding: 5px 0;
  margin: 0;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}

<ul class="tour-dates">
  <li class="tour-date-item">
    <div class="tour-date-date">07/19/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Ryman Auditorium</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">07/22/2017</div>
    <div class="tour-date-city-state">London, UK</div>
    <div class="tour-date-venue">O2 Arena</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/21/2017</div>
    <div class="tour-date-city-state">Los Angeles, CA</div>
    <div class="tour-date-venue">House of Blues</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">08/27/2017</div>
    <div class="tour-date-city-state">Nashville, TN</div>
    <div class="tour-date-venue">Bluebird Cafe</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
  <li class="tour-date-item">
    <div class="tour-date-date">12/04/2017</div>
    <div class="tour-date-city-state">Austin, TX</div>
    <div class="tour-date-venue">SXSW</div>
    <a class="tour-ticket-btn" href="">Tickets</a>
  </li>
</ul>
CSS