提供边框塌陷来折叠会影响溢出隐藏

我使用ulli创建组按钮。为了浮动在ul中的li，我已将display:table的值设置为ul和display:table-cell到li元素。 Li元素具有跨度和div节点，用于在此处添加文本/图标。提供边框塌陷来折叠会影响溢出隐藏

这工作正常。

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

如果我设置为border-collapse:separate这个溢出的问题得到解决，但我不想重复粗边框（每个边界1px的）尝试。因此，请提供任何解决方案来包装li中的文本，即使我提供border-collapse:collapse的更多内容。否则建议与border-collapse:separate没有双边界的任何选项。

这里是我的plunker

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

感谢

来源

2016-08-05 Sasi Dhivya

您可以张贴plunker或代码片断？ – Srijith

使用'table-layout：fixed'在css中表 –

可以请你添加你的代码或jsfiddle链接吗？ –

你最好使用柔性您的任务。将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>

来源

2016-08-05 07:25:22 3rdthemagical

嗨看起来很好谢谢你的努力。我会试试这个，让你知道，因为我必须在更多的情况下测试我需要一些时间。但它似乎是个好主意 –

我已经使用你的代码并根据我的问题进行编辑。你能检查一下吗？在这里我必须根据父div的更改来调整ul li。父div的高度和宽度将在后面的代码中动态更改。所有的内部元素应根据父母的变化进行调整。文字内容应始终以中心为准。有什么选择吗？感谢您的任何建议 –

@SasiDhivya我做了一个小提琴。 https://jsfiddle.net/w23nuqvx/它是否解决您的问题？ – 3rdthemagical

提供边框塌陷来折叠会影响溢出隐藏

回答

相关问题