带有li表单元的ul表 [英] ul table with li table-cell
本文介绍了带有li表单元的ul表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用 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屋!
查看全文