提供border-collapse来折叠会影响溢出隐藏

Question

我正在使用 ul li 创建组按钮。为了在 ul 中浮动 li，我将 display:table 值设置为 ul 并将 display:table-cell 设置为 li 元素。 Li 元素具有 span 和 div 节点，用于在其中附加文本/图标。

这很好用。

但如果我将border-collapse:collapse 设置为表，width:100% 概念将无法按预期工作。如果我在一个范围内（li 内）提供更多文本，li 宽度会增加而不是包装到给定的空间中。我已将 width:100% 设置为 ul，其父 div 具有 300px。尝试通过设置溢出隐藏但没有用

如果我设置为border-collapse:separate，这个溢出问题就会得到解决，但我不希望我的li 元素带有双粗边框（每个边框1px）。 所以请提供任何解决方案来将文本包装在li 中，即使我使用border-collapse:collapse 提供更多内容。否则建议使用border-collapse:separate 没有双边框的任何选项。

这是我的小伙伴

https://plnkr.co/edit/th0ylX4dccZmoSeURk77?p=preview

谢谢

Answer 1

你最好使用 flex 来完成你的任务。 将display: flex 添加到容器，将flex: 1 1 auto 添加到li 元素。 flex: 1 1 auto 表示该元素占用了所有可用空间。

另一个例子：http://jsfiddle.net/w23nuqvx/。

.table_ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
  
  width: 300px;
  
  -ms-flex-wrap: wrap;  
      flex-wrap: wrap;
  /* flex-wrap: nowrap; disabling wrapping*/
  
  list-style: none;
}

.cells_li {
  -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
  
  border-top: 1px solid red;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  
  padding: .5em;
  text-align: center;
}

.cells_li:last-child {
  border-right: 1px solid red;
}

<div id="group" class="main_div">
  <ul class="table_ul">
    <li class="cells_li"><div><span>fghjkjhgfdsdfghj</span></div></li>
    <li class="cells_li"><div><span>Desktop</span></div></li>
    <li class="cells_li"><div><span>DeskTop</span></div></li>
  </ul>
</div>