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..

    Rotation of a div gives a black background on IE, how can I remove it?

    How to align radio buttons inside a DIV?

    CSS: How to use Transform property on a bootstrap grid class

    Make Dojo or Ext JS4 widgets look and behave like Kendo UI. How demanding will it be?

    How to make multiple divs always fill out the whole browser size?

    Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

    How to style pseudo counter in CSS

    CSS - how to align text and an image vertically?

    Css When having 2 bg-image, how to have 1 to extend out of the grid

    How to add html classes to a Django template 'for-loop' dynamically?

    how to put image and texts on img html css

    CSS- How'd they do that without Absolute Positioning and Z-index?

    How to combine several hover elements in JS/Jquery

    How to use CSS filters in JavaScript?

    How to get only the last ul of specific id on page via CSS :last-child property?

    How to Apply CSS Style Code into My Custom TextView in Android

    How to add spacing between two rows of multiple divs each

    How to animate through stacked images Javascript

    Bootstrap with Picture Slideshow

    How to change default message “Please enter a value with a valid mimetype.” for HTML file input

    How to create a zig zag banner with css

    How can i make image size big using css?

    How to set border around Twitter Bootstrap Icon?

    How can I specify a *.css file in an ASP.NET UserControl?

    how to use CSS positioning in 100% width layout

    how to show an arrow to the only li item that has sub-menu

    How do you make a filter for images that have tags?

    How to make width of a dynamic table not increase?

    How do you make Static tool tip with CSS?

    How to change order of elements inside tables?