After reading the article on flexbox techniques without actually using flexbox, I attempted to implement "space-between" in my code:
ul {
margin: 0;
padding: 0;
text-align: justify;
}
ul:after {
content: "";
display:inline-block;
width:100%;
}
ul li {
list-style: none;
display: inline-block;
}<ul><li>Foo</li><li>Bar</li><li>Baz</li></ul>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>The <li> elements in the first <ul> are not evenly spaced due to the lack of whitespace between the <li> tags. Is it possible to achieve distribution with text-align: justify when the HTML is all on one line without whitespace? Can this be done without using flexbox?
I attempted to use ul li:after but it did not produce the desired result.