带有li表单元的ul表 [英] ul table with li table-cell

问题描述

我想使用 display:table 和 display:table-cell 在两列(代码中的两行)上显示内容.

HTML代码:

 < ul>< li> 1</li>< li> 2</li>< li> 3</li>< li> 4</li></ul> 

和CSS:

  ul {list-style-type:无；宽度:100％;显示:表；表格布局:固定；}li {显示:表格单元格；宽度:50％;} 

但是我找不到任何答案，为什么不起作用.我在哪里错了?

JSFiddle : https://jsfiddle.net/3Lwozhb9/

我需要相同的高度，并且显示为: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表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！