带有li表单元的ul表

我需要相同的高度，并且显示为:inline-block 没问题.解决方案 不是很清楚明确这些 li 单元格应该位于哪个顺序，但是一种选择是使用flexbox display:table 的strong>代替. * {框大小:border-box；}ul {list-style-type:无；宽度:100％;显示:flex;flex-wrap:包装;}li {flex:0 0 50％;边框:1px纯灰色；填充:1em；显示:flex;align-items:flex-end;} < ul>< li> 1.</li>< li> 2.Lorem ipsum dolor坐下，一直保持着高贵的状态.简易模拟，合法性，自由性和责任性?玛格南.< li> 3.Lorem ipsum dolor坐下，一直保持着高贵的状态.Quod，velit expedita?Rem eos nulla impedit.Lorem ipsum dolor坐下，一直保持着高贵的状态.疯子，quidem.结果导致的Nisi别名deserunt facilis unde repellendus praesentium esse，dolores natus reprehenderit incidunt culpa，击退fugiat est quis！< li> 4.</li></ul> I want to show content on two columns (and two rows in my code) using display: table and display: table-cell.HTML code:<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>and CSS:ul { list-style-type: none; width: 100%; display: table; table-layout: fixed;}li { display: table-cell; width: 50%;}but I can't find any answer why does not work. Where am I wrong?JSFiddle: https://jsfiddle.net/3Lwozhb9/I need same height, with display: inline-block is no problem. 解决方案 It's not quite clear what order these li cells should be in but one option is use flexbox instead of display:table.* { box-sizing: border-box;}ul { list-style-type: none; width: 100%; display: flex; flex-wrap: wrap;}li { flex: 0 0 50%; border: 1px solid grey; padding: 1em; display: flex; align-items: flex-end;}<ul> <li>1.</li> <li>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque similique optio modi harum quas quae, libero provident dignissimos laboriosam et, inventore voluptatibus veritatis quos? Magnam.</li> <li>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, velit expedita? Rem eos nulla impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veniam, quidem. Nisi alias deserunt facilis unde repellendus praesentium esse in consequuntur, dolores natus reprehenderit incidunt culpa, repellat fugiat est quis!</li> <li>4.</li></ul> 这篇关于带有li表单元的ul表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！