Remove extra spaces from CSS inline element

Question

I have a horizontal list, I want to be able to click on each of the list items without the following spaces.

HTML:

<ul id="server-header-list">
    <li>item1: </li>
    <li>item1 value</li>
    <li>testing list item2: </li>
    <li>value of item2</li>
</ul>

CSS:

#server-header-list li {
    display: inline;
    list-style-type: none;
    padding-right: 7px;
    white-space: nowrap;
}

Currently the output looks like this:

item1: item1 value  testing list item2: value of item2

This is good. But when I try to click on e.g. value of item2 it selects the whole row instead of only the "value of item2" also when I click on item1, it takes one extra following space with it. Any solutions?

Answer 1

this is because your <li>'s (or <ui>'s but i suspect that's a typo) are displayed as inline. You could do something like this:

li {
 display: block;
 float: left;
}

this should prevent the whitespace from appearing

Answer 2

I would recommend changing your <ui> tags to <li> as that is what you want I think, <ui> is not a valid tag. This will probably fix it