Removing white-space between nav-bar items

Question

My navbar is based off an un-ordered list.

Each <li> is displayed as inline-block.

However I am unable to get rid of the white-space between the li's

nav-item li{
  width: 123px;
  height: 120px;
  display: inline-block;
  padding: 0;
  margin: 0;
}

I have researched this item on stackoverflow/google but haven't found an solution yet.

Plnkr here:

http://plnkr.co/edit/7irazgvxqkpCeurnQ0Yv

http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Stickers, Jun 12 '15 at 16:50

score 0 · Answer 1 · answered Jun 12 '15 at 16:38

0

Change display: inline-block; to float: left;:

nav-item li{
      width: 123px;
      height: 120px;
      float: left;
      padding: 0;
      margin: 0;
}

answered Jun 12 '15 at 16:38

TheOnlyError

1,441
12
19

score 0 · Answer 2 · answered Jun 12 '15 at 16:38

0

Remove the white space and line breaks in your HTML between the LIs.

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li>
</ul>

answered Jun 12 '15 at 16:38

Scott Simpson

3,832
3
27
35

score 0 · Answer 3 · answered Jun 12 '15 at 16:43

0

Add white-space: normal; to your nav-item class

.nav-item li{
  width: 123px;
  height: 120px;
  display: inline-block;
  padding: 0;
  margin: 0;
 white-space: normal;
}

answered Jun 12 '15 at 16:43

Prime

3,530
5
28
47

Removing white-space between nav-bar items

3 Answers3