li elements to justify - html

Question

I'm trying to justify variable number of li elements, to fill the width of a ul block with equal spacing between them. It would be important to have minimal distance between the elements.
I tried various solutions from StackOverflow answers, for example https://stackoverflow.com/a/10020586/3897243, but none of them worked out for me.
HTML:
<ul class="clearfix">
<li>Covenantal
</li>
<li>Inyoite
</li>
<li>Myopical
</li>
<li>Funiculate
</li>
<li>Uncompromisingness
</li>
</ul>
CSS:
li {
float: left;
list-style: none;
font-size: 20px;
line-height: 1.5;
display: inline-block;
}
ul::after {
width: 100%;
display: inline-block;
content: ".";
visibility: hidden
}
li {
display: inline-block
}
https://jsfiddle.net/r1mw5j9h/

Answer 1

Using display:table; width:100%; on your wrapping <ul> and display:table-cell; text-align:center; on the <li> will ensure that all elements will fit side by side using the minimum available width and will split the available padding evenly when there is more space to give.
See your updated fiddle here: https://jsfiddle.net/r1mw5j9h/2/

Answer 2

if you want space between each elements then try setting
li {
float: left;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
padding:5px; // try adding padding
}
padding property will give you space between elements.
is that what you want?

Answer 3

ul, li {
padding: 0;
margin: 0;
}
ul {
background-color: #888;
text-align: center;
}
ul > li {
display: inline-block;
vertical-align: middle;
list-style: none;
background-color: #aaa;
font-size: 20px;
line-height: 1.5;
}
ul > li a{
display: block;
color: #fff;
text-decoration: none;
padding: 0 15px;
border: 1px solid #000;
}
<ul>
<li>Covenantal
<li>Inyoite
<li>Unpollutable
<li>Bibliopolical
<li>Vibrato
<li>Myopical
<li>Funiculate
<li>Indesignate
<li>Uncompromisingness
</ul>