显示：在新行

这里表单元格是什么，我的意思是一个示例代码：显示：在新行

HTML

<ul class="table"> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
    <li class="table-cell"></li> 
</ul>

CSS：

.table { 
    display: table; 
} 

.table-cell { 
    display: table-cell; 
    width: 25%; 
}

问：我怎样才能使第三和第<li>（表单元格）在宽度为50％的新行上显示？

问：有没有一种方法只使用CSS而不使用jQuery或Javascript？

来源

2013-02-08 codiac

简单的答案是：你不能，至少不能与列表。将其显示设置为table-cell的相邻元素视为属于同一行（即使未提供行元素，也会为您创建一个匿名元素）。由于列表不允许在ul和li之间包含任何其他标签，因此这对列表来说是不可能的。你将不得不使用不同的标记或不同的样式。

如果您不想修改标记，以下是您的选项。在列表项

inline-block的：http://jsfiddle.net/XNq74/1/

li { 
    display: inline-block; /* could use floats here instead */ 
    width: 40%; 
}

CSS列将是一个合理的选择：http://jsfiddle.net/XNq74/

ul { 
    columns: 2; 
}

http://caniuse.com/#feat=multicolumn

实现Flexbox也将工作，并且可以在使用与内嵌块组合：http://jsfiddle.net/XNq74/2/

ul { 
    display: flex; 
    flex-flow: row wrap; 
} 

li { 
    flex: 1 1 40%; 
}

http://caniuse.com/#search=flexbox

来源

2013-02-08 13:07:15 cimmanon

内联块使对象之间的4像素的差距，如果我记得右。我需要他们成为无缝的。至少在同一行上的对象也必须具有相同的高度（动态高度）。 – codiac 2013-02-08 18:01:20

不，空格在内联块对象之间产生4像素的差距，你可以做很多事情来摆脱它（参见http://css-tricks.com/fighting-the-space-between-inline-block-elements /）。由于他们必须是相同的高度，flexbox是你的男人：http://jsfiddle.net/XNq74/11/ – cimmanon 2013-02-08 19:53:32

感谢您的帮助和资源。 Flexbox具有较低的浏览器支持。为了争取内联块元素之间的空间，这是一个很好的来源。我只想到 - 边际。然而，这并不能解决相同的高度问题，同时也与梯度保持良好的兼容性（使用-margin +填充和隐藏溢出方法的示例）。 – codiac 2013-02-09 08:07:27

-4

ul.table li+li+li { /** your CSS code **/ } This one is for the third element 


ul.table li.last { /** your CSS code **/ } This one is for the fourth element

来源

2013-02-08 12:47:12

显示：在新行

回答

相关问题