Home/ Questions/Q 8443919
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:16:07+00:00

I’m trying to write a navigation bar using an <ul> with inline elements, but

  • 0

I’m trying to write a navigation bar using an <ul> with inline elements, but the elements all have a gap between them that seem to come from nowhere. That is when hovering a link, the shaded box should snap to the surrounding boxes. The page currently looks like this: http://wictorht.at.ifi.uio.no/. What is causing these gaps?

HTML:

<body>
    <div id="main">
        <ul class="header">
            <li class="title">wictorht</li>
            <li class="header">
            <a class="header" href="https://bitbucket.org/htor/dwmst/src">dwms</a>
            </li>
            <li class="header">
            <a class="header" href="https://bitbucket.org/htor/linux/src">linux</a>
            </li>
            <li class="header">
            <a class="header" href="http://www.fsf.org/register_form?referrer=10397">fsf</a>
            </li>
            <li class="header">
            <a class="header" href="http://stackexchange.com/users/1006063">stackexhange</a>
            </li>
        </ul>
    </div>
</body>

CSS:

body {
    background: #666666;
    color: #c0c0c0;
    margin: 0;
}

a.header {
    text-decoration: none;
    padding: 10px;
    margin: 0;
}

a.header:hover, a.header:active {
    background-color: #666666;
    color: #c0c0c0;
}

ul.header {
    background-color: #c1c1c1;
    color: #666666;
    list-style: none;
    padding: 10px 10px 10px 0;
    margin: 0 0 10px 0;
}

li.header {
    display: inline;
}

li.title {
    background-color: #000000;
    color: #bada55;
    display: inline;
    padding: 10px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is because all white-space, including new-lines, between elements is collapsed down to a single space when rendered by the client’s browser. To hide the spaces you can either:

    1. Remove the spaces between li elements:

      <li><!-- content --></li><li><!-- more content --></li>

    2. Set the font-size of the parent ul to 0, and redefine the font-size of the li element:

      ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
}

    3. Comment out the gaps between the li elements:

      <li>Content</li><!--
--><li>Next li</li>

    4. Float the li elements instead of using display: inline, which removes the spaces by taking the elements out of the normal flow:

      ul {
    overflow: hidden; /* to keep the li 'visibily' within the bounds of the ul */
}

ul li {
    float: left;
}

    5. Close the li tag on the next line, before the next li opening tag this feels slightly wrong to me, but it is valid:

      <li>First li</li
><li>Second li</li>

    (Or, obviously, place the next li opening-tag on the previous line, immediately after the previous element’s closing tag:

        <li>First li</li><
    li>Second li</li>

    )

    • 0