Question

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

这很好用。

但是如果我将border-collapse:collapse设置为table，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/。

＆＃13;

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

＆＃13;

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

＆＃13;

提供崩溃边界崩溃会影响溢出隐藏

1 个答案: