Reputation: 33
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.
Upvotes: 1
Views: 31158
Reputation: 1563
ul {
list-style-type: none;
width: 100%;
display: table;
table-layout: fixed;
}
li {
display: table-cell;
width: 50%;
}
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
<li>4</li>
</ul>
Both of the adjacent list items are the same height based on their content
Upvotes: 2
Reputation: 115385
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>
Upvotes: 3