CODEWITHSUNDEEP
htmlcsslisthtml-table
DonFuchs
DonFuchs

Reputation: 133

Vertically align cells across html ul list items

What I need is a ul list that looks like this:

 - xxx      yyy
 - xxxxxxx  yy
 - xxxxx    yyyyy

rather than

 - xxx yyy
 - xxxxxxx yy
 - xxxxx yyyyy

So inside

<ul>
   <li><div class="cell1"></div><div class="cell2"></div></li>
   <li><div class="cell1"></div><div class="cell2"></div></li>
   <li><div class="cell1"></div><div class="cell2"></div></li>
</ul>

I would like to merge a table like alignment.

Update: And what about having a wrapper div inside the li?

<ul class="table-list">
  <li><div><span>xxx</span><span>yyy</span></div></li>
  <li><div><span>xxxxxxx</span><span>yy</span></div></li>
  <li><div><span>xxxxx</span><span>yyyyy</span></div></li>
</ul>

https://jsfiddle.net/d6zvLgfu/1/

Upvotes: 0

Views: 91

Answers (2)

Daniel Sixl
Daniel Sixl

Reputation: 2499

Use display: table; and it will behave like a table:

ul.table-list {
  display: table;
  border-collapse: collapse;
}

ul.table-list li {
  display: table-row;
  position: relative;
}

ul.table-list span {
  display: table-cell;
  padding: 0.2em 0.3em;
  border: 1px solid #14cce4; /* visualize the table */
}


/* add bullet if needed */

ul.table-list li:before {
  content: "- "
}
<ul class="table-list">
  <li><span>xxx</span><span>yyy</span></li>
  <li><span>xxxxxxx</span><span>yy</span></li>
  <li><span>xxxxx</span><span>yyyyy</span></li>
</ul>

Upvotes: 2

Johannes
Johannes

Reputation: 67778

One way is to make all DIVs inside lis inline-blocks and add percentage widths to .cell1 and cell2:

li>div {
  display: inline-block;
  vertical-align: top;
}

.cell1 {
  width: 20%;
}

.cell2 {
  width: 70%;
}
<ul>
  <li>
    <div class="cell1">dfg</div>
    <div class="cell2">oiu vdsklndsf oiu</div>
  </li>
  <li>
    <div class="cell1">tzuk</div>
    <div class="cell2">amn dfg sdflgj dflgmn voj seorgij ef,mgn dflj ldkfgm .,m dfg sdflgj dflgmn voj seorgij ef,mgn dflj ldkfgm moiudskjn dfsoiu sdfne roie n sdlkjh sdfkjb i iuerkjn kjh kdf</div>
  </li>
  <li>
    <div class="cell1">dsfoiu oisdfg</div>
    <div class="cell2">vxciuh dfsndf smn iuzg</div>
  </li>
</ul>

Upvotes: 1

Related Questions