How to get rid of white space between css horizontal list items? [duplicate]


Tags: html,css,html-lists,navigationbar

Problem :

I've got the following test page and css. When displayed, there is a 4px gap between each list item. How do I get the items to be next to each other?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>

The css:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}


Solution :

You need to use display:block and float:left on the lis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.

Also see my similar question.


    CSS Howto..

    Jquery not showing select element. No errors in console

    How can I add an external stylesheet to a UIWebView in Xcode?

    How to convert CSS into LESS when there are multiple classes using same properties

    How to keep indent in lists with CSS?

    How to make a sticky footer using CSS?

    CSS: How to center text with surrounding borders

    how to create css shapes X which has to be background inside? [closed]

    How to remove the “Facebook social plugin” text?

    Show bottom of an overflow string in a div with fixed height/width?

    how to prevent css animation from running on page load

    How to zoom into a specific location of an image using CSS

    CSS: How to get rid of the extra space of first line of a paragraph?

    Does anyone know how Pinterest.com's layout works?

    How work with degree or start and stop in linear-gradient CSS3

    How do I handle the hover in this recursive menu using jQuery?

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    How to build a CSS style with a LESS mixin parameter?

    How can I set a “bounding” area for my drag-able object in javascript?

    How to display vertical text in table headers with auto height / without text overflow?

    How to select the by CSS?

    How do I find out which style is overriding another style?

    show the div inside that div next to it

    CSS - How to make overflow hidden on the right but not the left? [duplicate]

    How to unfold or close content in html/JS - always assigned to different id

    How to deselect with CSS?

    How do i change the styling of a nodes CSS through javascript(d3)

    How to use a variable for image paths with less mixins

    How to apply css for a class within h2?

    Why won't my SVG's show?

    how to arrange 2 images side by side in mobile view?