Remove padding from unordered list

Question

Something has bugged me for years. If you look at this fiddle

you'll see a simple unordered list with some padding on the a element and a background colour to create a box.

There is white space between each item in the list. How can you get rid of it so the boxes are touching horizontally?

Html is:

<div id="dvLinks">
    <ul>
        <li><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
        <li><a href="#">Three</a>
        </li>
    </ul>
</div>

css is:

#dvLinks ul {
    margin: 0;
    padding: 0;
    list - style - type: none;
}
#dvLinks ul li {
    display: inline;
}
#dvLinks ul li a {
    text - decoration: none;
    padding: .1em 1em;
    color: #000;
    background-color: # 33EEDD;
}

Answer 1

There are several ways. A few are:

1) Remove thew white space between the list item elements:

<li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li>

jsFiddle example

2) Put HTML comments between the list item elements

<li><a href="#">One</a></li><!--
--><li><a href="#">Two</a></li><!--
--><li><a href="#">Three</a></li>

jsFiddle example

3) Float them left:

#dvLinks ul li {
    display: inline;
    float:left;
}

jsFiddle example

Answer 2

It's very simple:

CSS

#dvLinks ul li { display: table-cell; }

---

RESULTS