0

I know that this must be one of most asked questions, but I really want to understand - why justified grid menu must have a space between <li> elemtents?

I made an example here: http://jsbin.com/oNibesA/1/edit

CSS:

.inline-list {
    text-align: justify;
    list-style: none;
    margin: 0;
    padding: 0;
}

.inline-list:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.inline-list li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.inline-list li:before {
    content: ' ';
}

.inline-list li a {
    display: block;
    padding: 5px 10px;
}

This HTML (with spaces) works fine - it spreads the elements evenly in one line:

<ul class="inline-list">
    <li><a>Everything</a></li>
    <li><a>Is</a></li>
    <li><a>Fine</a></li>
    <li><a>With</a></li>
    <li><a>Multiline</a></li>
    <li><a>HTML</a></li>
</ul>

But this HTML (all in one line without spaces) doesn't spread evenly:

<ul class="inline-list"><li><a>This</a></li><li><a>Is</a></li><li><a>A</a></li><li><a>Weird</a></li><li><a>CSS/HTML</a></li><li><a>Bug</a></li></ul>

Now I know that it happens, but I'm curious - why it happens? And can you somehow fix this (for example, put the space between the <li> elements) just by using CSS?

Taai
  • 2,448
  • 1
  • 16
  • 13
  • possible duplicate of [Mysterious whitespace between "inline-block" divs](http://stackoverflow.com/questions/11982197/mysterious-whitespace-between-inline-block-divs) – Paulie_D Jan 17 '14 at 19:16
  • 1
    there's no space(white-space) in between li, it behaves like a word where li are inline-boxes/letters. – G-Cyrillus Jan 17 '14 at 19:20
  • possible duplicate of [A Space between Inline-Block List Items](http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items) – showdev Jan 17 '14 at 19:20
  • 1
    you coud use display:flex; justify-content:space-between; instead if you minify your HTML – G-Cyrillus Jan 17 '14 at 19:22

3 Answers3

3

why justified grid menu must have a space between <li> elemtents?

That's because with that space each inline-block is considered like one separated element, lets say in case of justify that space is rendered and works to set each element like a single word. Then justify can do his job.

If you remove the space is like you are getting together all blocks like one word and justify can just break it.

Edit

As You can see on this Demo Fiddle if you save that whitespace inline-block can work as single words other properties like letter-spacing and word-spacing also modify the inline-block behavior.

DaniP
  • 37,813
  • 8
  • 65
  • 74
0

Because there is no whitespace between the different words they are considered as one single word. justify doesn't have any effect on one word, since it changes the space between words.

JelteF
  • 3,021
  • 2
  • 27
  • 35
0

Would display:flex; be an alternative if you minify your HTML ? http://jsbin.com/oMIdODaZ/1/ 

.inline-list {
  margin: 0;
  padding: 0;
  display:flex;
  justify-content : space-between;
}


li {
  display:inline-block;
  background:gray;
}

limits at this avearge time: http://caniuse.com/flexbox

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • You seemed to have missed all of the prefixed properties you'll need to actually make this work. So no, this actually ends up being *more* code than what the OP has. – cimmanon Jan 17 '14 at 19:38
  • at this time prefix are usefull and can be easely added via javascript. caniuse.com mentions webkit and moz, wich for moz is actually not needed in FF 26 :) – G-Cyrillus Jan 17 '14 at 19:50
  • Also, this question technically does not answer the OP's question. – cimmanon Jan 17 '14 at 19:53
  • i did in comments below the question, and it does give an alternative in case of minified HTML – G-Cyrillus Jan 17 '14 at 19:54