How to set ul width in percent? - html

Question

I have html:
<div class="wd">
<ul id="postlist">
<li><span class="num">h1</span>
<ul>
<li><span class="dt">h2</span>
<ul>
<li><span class="pun">h3</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="num">1<br/>11<br/>111</span>
<ul>
<li><span class="dt">1.1</span>
<ul>
<li><span class="pun">1.1.1</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="num">2<br/>2</span>
<ul>
<li><span class="dt">2.1</span>
<ul>
<li><span class="pun">2.1.1</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
how to set with css width of #postlist 100%, .num,.dt,.pun - 33% each?
http://jsfiddle.net/mma75kq7/

Answer 1

You can pull that off, but you'll need to change your css a bit:
outer wrapper, .wd set it to display table & 100% width, or if you plan on having something else inside it, maybe wrap the whole thingy in a div of its own with display table and 100% width
the top <li> set it to have the width of 33.3333%
then the <ul> inside the <ul> give it a width of 66.6666%
the <li> inside the children <ul>, with .dt and another ul, set both children to display table cell, and the same for the next children
and it should get going.
Alternatively you could just use a regular <table> if you plan on displaying tabular data, instead of pouring css rules to mimic the table behavior.(seems like a awful amount of markup to pull off 'undercover' table )
Check out the demo here or the snippet bellow:
.wd {
width: 100%;
display: table;
}
ul {
display: table-cell;
vertical-align: top;
list-style: none outside none;
width: 100%;
padding: 0;
}
ul ul {
width: 66.6666%;
}
li {
vertical-align: top;
display: table;
width: 100%;
}
.num {
display: table-cell;
width: 33.3333%;
}
.dt {
display: table-cell;
width: 50%;
}
.pun {
display: table-cell;
width: 50%;
}
ul#postlist >li {
border-bottom: 1px solid black;
}
<div class="wd">
<ul id="postlist">
<li><span class="num">h1</span>
<ul>
<li><span class="dt">h2</span>
<ul>
<li><span class="pun">h3</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="num">1<br/>11<br/>111</span>
<ul>
<li><span class="dt">1.1</span>
<ul>
<li><span class="pun">1.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="num">2<br/>2</span>
<ul>
<li><span class="dt">2.1</span>
<ul>
<li><span class="pun">2.1.1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Answer 2

I, belatedly, offer the following simplified HTML and CSS that achieves the same result.
.wd {
width:100%;
}
ul#postlist {
display: table;
width:100%;
margin: 0;
padding: 0;
}
ul#postlist > li {
display:table-row;
}
.num, .dt, .pun {
display:table-cell;
vertical-align: top;
list-style: none outside none;
width: 33.333333333%;
border-bottom: 1px solid black;
}
<div class="wd">
<ul id="postlist">
<li>
<div class="num">h1</div>
<div class="dt">h2</div>
<div class="pun">h3</div>
</li>
<li>
<div class="num">1
<br/>11
<br/>111</div>
<div class="dt">1.1</div>
<div class="pun">1.1.1</div>
</li>
<li>
<div class="num">2.
<br/>2..</div>
<div class="dt">2.1</div>
<div class="pun">2.1.1</div>
</li>
</ul>
</div>