0

I want to layout a series of menu with the float and clearfix method. Everything is ok, except that I want the menu group to be on the right. Also, as the length of the menu texts varies, I don't want to set a uniform width for them. But when I set a padding for them, the last element will always enter a new line. It seems that the calculation of the floating container is not as wished.

If I force some large width on the container, there is no extra line, but there would be uncontrolled whitespace on the right. If I don't set the float of the container, and let the children to float right, everything is as expected, except that I would have to write the <li> in the reversed order.

The HTML is:

<ul class="clearfix" id="top-navigation-container">
                <li class="top-navigation">12345678</li>
                <li class="top-navigation">2345</li>
                <li class="top-navigation">3</li>
                <li class="top-navigation">LOG IN</li>
            </ul>

The SCSS is:

#top-navigation-container {
    float: right; // Peculiar thing happens.
    white-space: nowrap;
//    width: 75%;
    text-align: center;
    top: 25px;
    right: 25px;

    .top-navigation {
//      width: 25%;
      padding-left: 2%;
      padding-right: 2%;

      float: left;
      display: inline-block;

    }
  }

.clearfix::after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

What is the principle behind it? Why is there a new line? Also, it is very peculiar that if I check and uncheck the float or white-space of the container in the dev tools of Chrome, the rendered outcome would vary, and sometimes there is no new line, sometimes even extra whitespace on the right.

Are there any more satisfactory solutions to it?

9
  • CSS comments can only be /**/ and not // May 29, 2015 at 3:18
  • This is SCSS and not CSS. so // comments should be fine.
    – Bala
    May 29, 2015 at 3:31
  • @Xufox Well it's my fault. That is actually scss.
    – Colliot
    May 29, 2015 at 3:31
  • Try to put your </li> and <li> next to each other.. something like </li><li>..
    – Bla...
    May 29, 2015 at 3:55
  • 1
    @Aszune'sHeart Because you use inline-block on your <li>, which will give extra space.. Look at this article for further explanation: css-tricks.com/fighting-the-space-between-inline-block-elements
    – Bla...
    May 29, 2015 at 4:10

2 Answers 2

1

Try to put your </li> and <li> next to each other..

<li class="top-navigation">12345678</li><li class="top-navigation">2345</li>

That happens because you use inline-block on your <li>, which will give extra space.. Look at this article for further explanation..

1

This issue is seen when inline-block is applied for the <li> elements. The simplest solution is to set font-size as zero font-size:0 for the #top-navigation-container and set the desired font-size for the <li> elements

sample CSS

#top-navigation-container {font-size:0;}
#top-navigation-container .top-navigation {font-size:20px;}

working jsfiddle link

2
  • I encountered an even more peculiar problem that it sometimes works normally, but sometimes not. The outcome is totally random.
    – Colliot
    May 29, 2015 at 6:03
  • 1
    this is generally happens because the browser sometimes will not recognize the white-space between html-tags and sometimes it does. It can also be avoided if your tags are places one after another without any space in between. Personally, I do not like it as it is not nice to read or properly formatted :)
    – Bala
    May 29, 2015 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.