带有底部边框错误的 CSS li 列？

Question

<分区>

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