CSS li列带有border-bottom错误？

dmoz 发表于 Dev

166

dmoz

我有一个无序列表column-count: 2;应用于风格<ul>，并border-bottom: solid 1px #ccc;在<li>项目。

.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>如下所示：

屏幕截图2

任何想法如何解决这个问题？谢谢！

或Drori

防止内部打破的.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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-26

我来说两句

0 条评论

登录后参与评论

上一篇：libstdc ++静态链接和System V ABI

CSS li列带有border-bottom错误？

CSS li列带有border-bottom错误？

构建类似于Jarvis的本地语言应用程序

在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

SQL Server中的非确定性数据类型

使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

Swift 2.1-对单个单元格使用UITableView

Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

HttpClient中的角度变化检测

如何了解DFT结果

错误：找不到存根。请确保已调用spring-cloud-contract：convert

Embers js中的更改侦听器上的组合框

在Wagtail管理员中，如何禁用图像和文档的摘要项？

如何避免每次重新编译所有文件？

Java中的循环开关案例

ng升级性能注意事项

Swift中的指针替代品？

如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？

使用分隔符将成对相邻的数组元素相互连接

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

ggplot：对齐多个分面图-所有大小不同的分面

完全禁用暂停（在内核级别？-必须与使用的DE和登录状态无关！）