Set width of element to "0" (not absolute positioned) with CSS

Question

I have an element and even if i define "max-width=0" it has a width of 4px, see the image:

When i position the element absolute it is gone but due to the css transition (logo slides in on scroll down > 250px) i can not position it absolute.

This is the CSS:

#page-wrap.oben ul#menu li.menutext {
    padding: 0;
    line-height: normal;
    overflow: hidden;
}
#page-wrap.oben li.menutext a {
    font-size: 24px;
    max-width: 0;
    opacity: 0;        
    vertical-align: middle;

    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

And this is the HTML:

<li class="menutext biggerfont">
   <a href="#">
       Schooool!
   </a>
</li>

Answer 1

This is due to the way that display: inline-block; works, so you have the following options:

Use float instead

This will stack the elements directly next to each other.

ul#menu li {
    float: left;
}

Set the text size of the ul to 0, then specify the height in the li

This will mean that the gap left by inline-block does not take up any space, so the same effect

ul#menu {
    font-size: 0;
}
ul#menu li {
    font-size: 12px;
}

Change your HTML mark up

The new line between <li> elements is the cause of this problem. If you don't want to change the css then removing the line breaks between the closing and opening tags will have the same effect, and allow you to continue to use inline-block

<li>item</li><li> Item2</li><li> Item3</li>

None of this is tested on your example, but any of the solutions should work for you. The float example might cause you different issues, depending on how your containers are set up.

Answer 2

Its because you have a space between your </li><li> elements. If you remove the whitespace in between the closing and opening li this will eliminate the gap.

Answer 3

In the example, setting li in float:left; fix it, I don't know if it's what you are looking for.