Krapatalin Krapatalin - 6 months ago 34
HTML Question

ul table with li table-cell

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.

Answer

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>