How to distribute li elements the same way when html has no spaces?

Question

I read this article An almost complete guide to flexbox (without flexbox) , and I'm trying to use the "-between space", I have code like this:

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>

Run code

<li>in the first it is <ul>not distributed correctly, because it <li>does not have spaces at the end of tags <li>, is it possible to have distribution using text-align: justifywhen html is one line without spaces? Is this possible without flexbox?

I tried to add ul li:after, but that didn't work.

Answer 1

text-align: justify , , text-align . % text-align .

ul {
  width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

ul li {
    float:left;
    line-height:37px;
    height:100%;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    width: 33.33%;
  background: red;

}
ul li span{
 background: blue;
 display: block;
width: 100%;
}

<ul><li>Foo</li><li>Bar</li><li>Baz</li></ul>
<ul>
<li><span>Foo</span></li>
<li><span>Bar</span></li>
<li><span>Baz</span></li>
</ul>