When distributing divs horizontally equally, issues arise when these elements are attached without spaces in between (particularly in Chrome and Firefox).
For instance: http://jsfiddle.net/pdelorme/au9ouko0/
HTML :
<div class="ul">
<div class="li">Item 1</div>
<div class="li">Item 2</div><div class="li">Item 3</div>
<div class="li">Item 4</div>
</div>
CSS :
.ul {
text-align: justify;
}
.ul > .li {
display: inline-block;
}
.ul:after {
content: "";
width: 100%;
display: inline-block;
}
.li {
background-color: hotPink;
color: #fff;
}
The visual outcome is as follows :
=======================================
Item 1 Item 2 Item 3 Item 4
=======================================
This layout works correctly except when Item 2 and Item 3 are adjacent.
Desired output:
=======================================
Item 1 Item 2 Item 3 Item 4
=======================================
The challenge lies in the fact that since my HTML is condensed, the spaces between divs get stripped away automatically, preventing even distribution.
<div class="ul"><div class="li">Item 1</div><div class="li">Item 2</div><div class="li">Item 3</div><div class="li">Item 4</div></div>
ends up looking like this:
=======================================
Item 1 Item 2 Item 3 Item 4
=======================================
Suggestions on how to address this issue?