CODEWITHSUNDEEP
htmlcsshtml-lists
Sai Krishna
Sai Krishna

Reputation: 8187

Restyling style ( CSS ) definition for the unordered list ( <ul> ) element ( margin inconsistency )

The example on jsfiddle - http://jsfiddle.net/FbEXV/

What I've tried to do is restyle my 

<ul id="options">
            <li>important</li>
            <li>featured</li>
            <li>unanswered</li>
            <li>most_recent</li>
        </ul>

To not appear as an unordered list with bullets but rather as tabs. Definitions I've used 

ul
list-style-type:none;
margin: 0;
padding: 0;

li
display: inline-block;
margin: 0;
padding: 0;

But this is not enough, the li elements seem to have a right margin of sorts. Can you figure what the problem is ? http://jsfiddle.net/FbEXV/

Upvotes: 1

Views: 575

Answers (2)

sandeep
sandeep

Reputation: 92793

The space come from inline-block so as rob said it's good to use float:left or there is an other option write like this 

<ul id="options">
            <li>important</li><li>featured</li><li>unanswered</li><li>most_recent</li>
</ul>

Upvotes: 1

Rob
Rob

Reputation: 4947

Add float:left to your li, that should do the trick

li
{
    float:left;
    //Other stuff..
}

Upvotes: 1

Related Questions