4

How can I get the below snippet to look like this:

enter image description here

So that the items are evenly spaced, and the first item has no empty space on the left & the last item has no empty space on the right. Similar to what MS Word can do:

Full-justification

All lines in a paragraph are expanded so they are neat against both the left and right margins. To expand the line, space has to be added, between words and characters, to fill out the line.

In the code snippit below, there is lots of purple space to the left of the first item, I want to remove this.

ul {
  list-style: none;
  background-color: rebeccapurple;
  color: white;
  margin: 55px 10px;
  display: flex; 
  // align-items: stretch;
  justify-content: space-between;
}
li {
  padding: 0;
  background-color: #6495ed;
}
li:nth-of-type(2n) {
  background: lightslategrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
 <li>Item</li>
</ul>

UPDATE

@kukkuz answer below solves the snippit but I also had to add the below to get it to work with twitter Bootstrap. Bootstrap was adding :before & :after elements that were messing things up for me.

enter image description here

Removing them got it working for me, but I would recommend using a more specific selector that ul otherwise you could mess things up with Bootstrap.

FYI - I was using Bootstrap from this CDN, v3.3.7: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/dist/css/bootstrap.css

ul:before { 
    content: none;
}
ul:after {
    content: none;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Holly
  • 7,462
  • 23
  • 86
  • 140

1 Answers1

4

Reset the user-agent/browser padding of ul element - see demo below:

ul {
  list-style: none;
  background-color: rebeccapurple;
  color: white;
  margin: 55px 10px;
  padding: 0;
  display: flex;
  /*align-items: stretch;*/
  justify-content: space-between;
}
li {
  padding: 0;
  background-color: #6495ed;
}
li:nth-of-type(2n) {
  background: lightslategrey;
}
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • 1
    Beat me too it :) – Aaron Dec 09 '16 at 14:35
  • @kukkuz, that makes sense but it didn't work for me, I realise it was because I was using Bootstrap and there were `:before` & `:after` elements messing things up for me. I had to add `ul:before { content: none; } ul:after { content: none; }` to fix it, Can you add that to your answer, just in case it helps someone else? – Holly Dec 09 '16 at 14:46
  • are you sure its coming from bootstrap... I tried adding bootstrap css and couldn't find the `after`/`before` styles.. – kukkuz Dec 09 '16 at 14:49
  • 1
    @kukkuz, yea, It's probably because I also had classes `nav navbar-nav` on the `ul`, sorry should have been more specific in my question, just didn't suspect Bootstrap at all – Holly Dec 09 '16 at 14:54
  • ohh, now I see why the pseudos where there :) – kukkuz Dec 09 '16 at 14:56