li elements to justify

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><a href="/projektek/covenantal-cathexion/">Covenantal</a>
    </li>
    <li><a href="/projektek/inyoite-unstintingly/">Inyoite</a>
    </li>
    <li><a href="/projektek/myopical-gaspingly/">Myopical</a>
    </li>
    <li><a href="/projektek/funiculate-periarthritis/">Funiculate</a>
    </li>
    <li><a href="/projektek/uncompromisingness-mastatrophia/">Uncompromisingness</a>
    </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/

All you need is just the `li` selector only, with `padding-left` property. There is no need to `float` property in it. — SaidbakR, May 18 '15 at 22:08

score 1 · Accepted Answer · answered May 18 '15 at 22:09

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/

score 0 · Answer 2 · answered May 18 '15 at 21:54

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?

score 0 · Answer 3 · answered May 18 '15 at 22:16

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><a href="/projektek/covenantal-cathexion/">Covenantal</a>    
    <li><a href="/projektek/inyoite-unstintingly/">Inyoite</a>    
    <li><a href="/projektek/unpollutable-unicameralist/">Unpollutable</a>   
    <li><a href="/projektek/bibliopolical-reimpel/">Bibliopolical</a>    
    <li><a href="/projektek/vibrato-myotacismus/">Vibrato</a>   
    <li><a href="/projektek/myopical-gaspingly/">Myopical</a>   
    <li><a href="/projektek/funiculate-periarthritis/">Funiculate</a>   
    <li><a href="/projektek/indesignate-parachromoparous/">Indesignate</a>    
    <li><a href="/projektek/uncompromisingness-mastatrophia/">Uncompromisingness</a>   
</ul>

li elements to justify

3 Answers3