0

I realize this question has been asked here and the highest upvoted answer was very helpful, however I am having an issue.

Basically I want a nav (essential just a ul and its lis) to fill the width (or 80% of the width) equally.

The first task is to center the nav the second task is to make sure that the items take up equal space. The other solution on SO proposes a bit of a hack, inserting content: "" after the ul. This works great, along with the other css rules I show below, when all lis are one word. However, for two word lis I get the effect achieved in my screen shot here:

one the text is spread quite wide between the two words If there is not a smooth way to remove that space, is there at least some sort of hack to make that space smaller that someone can think of? I made a jsFiddle here but it doesn't really illustrate how bad the problem is.

Thanks a lot

HTML:

    <article class="main home">
        <img class="heroLogo" src="media/TM-Logo-4.png">
            <nav>
                <div class="menuIcon"></div>
                <ul>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">Two longWords</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
    <li><a href="http://www.google.com">One</a></li>
                </ul>
            </nav>
    </article>

CSS:

.menuIcon {
    display: none;
}

nav, nav:hover {
    width: 80%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    font-size: 1.2em;
    text-align: center;
}

nav ul, nav:hover ul, nav ul.clicked, nav ul.none {
    width: 100%;
    display: block;
    text-align: center;
    text-align: justify;
}

nav ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

nav li {
    width: 100%;
    display: inline;
    padding: 0;
    margin: 0;
}
Community
  • 1
  • 1
Startec
  • 12,496
  • 23
  • 93
  • 160

2 Answers2

0

Looking at your code, it seems that the solution is rather trivial: Deleting "text-align: justify;" will probably fix you up.

A longer answer would describe how the the width: 100% will spread the LI's and the text will then full justify to fill the space it was allocated... but I'm too lazy to write it.

cmroanirgo
  • 7,297
  • 4
  • 32
  • 38
  • without text justify the `lis` are not spread evenly throughout their container. – Startec Dec 04 '14 at 04:15
  • Nevertheless... This is why there is space in your text. You asked the question ;) To ensure that each button takes equal space, set the li width to 100/7, ie li { width:14% }... like @thePav suggests – cmroanirgo Dec 04 '14 at 04:22
0

You could simplify your CSS and use display: inline-block - it's quite useful, and give the <li>s a percentage width value. Check this out (if you know the amount of list items you will have)

CSS

.menuIcon {display: none}
nav {width: 100%; position: fixed; left: 0; bottom: 0; font-size: 1.2em}
nav ul {text-align: center; padding: 0; width: 80%; margin: 0 auto}
nav li {display: inline-block; width: 14%; margin: 0}

HTML

<article class="main home">
  <img class="heroLogo" src="media/TM-Logo-4.png">
  <nav>
    <div class="menuIcon"></div>
    <ul>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">Two longWords</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
      <li><a href="http://www.google.com">One</a></li>
    </ul>
  </nav>
</article>
PavKR
  • 1,591
  • 2
  • 11
  • 26