Element taking space..

by techsin

HTML

<ul class='a'>
    <li>A</li>
    <li>VVVV</li>
    <li>C</li>
    <li>dd</li>
    <li>Eeeeeeeee</li>
</ul><br><br>
<ul class='b'>
    <li>A</li>
    <li>VVVV</li>
    <li>C</li>
    <li>dd</li>
    <li>Eeeeeeeee111</li>
</ul>
<ul class='c'><li>A</li>
    <li>VVVV</li>
    <li>C</li>
    <li>dd</li>
    <li>Eeeeeeeee111</li></ul><br><br>

<ul class='d'>
    <li>A</li>
    <li>VVVV</li>
    <li>C</li>
    <li>dd</li>
    <li>Eeeeeeeee111</li>
</ul>

CSS

*{
    margin:0;
    padding:0;
}
/* all */
li {
    list-style:none;
    background-color:yellow;
}
ul {
    display:inline-block;
    background-color:red;
}
/* inline with br need jquery */
.a li,.c li{
        display:inline-block;
}
/* inline with white Space
.b li{
    white-space: nowrap;
}
/* c with inline ws on ul need structure in html*/ 
.c {
    white-space: pre-line;
}
/* float and absolute postioning */
.d li {
    /* width:100%; */
    float:left;
    clear:both;
    
}
/* now in float positioning 100% left would refer to ul not li which is though a parent because absolute refers to first element that has been positioned */

JavaScript

$('.a li').after("<br>")