CODEWITHSUNDEEP
htmlcssmenumargin
codacopia
codacopia

Reputation: 2501

Having trouble increasing spacing between horizontal menu items with CSS

Here is the HTML:

<div id="menu">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>

Here is the CSS:

li {
    display:inline;
    padding: 10px;
}
#menu {
    margin: 21px 646px 21px 646px;
}

I cannot seem to increase the space between the menu items. What should I adjust to do so?

Upvotes: 6

Views: 79313

Answers (3)

Ajay Gupta
Ajay Gupta

Reputation: 2957

You just need to add display:inline-block; in list menu.

Change your CSS like below : 

li {
   display:inline-block;
   padding: 10px;
}

#menu {
    margin: 21px 646px 21px 646px;
}

Or See Here

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

try

a { 
    display: block;
    padding: 10px 30px;
}

edit

Do you want something like this ? http://jsfiddle.net/Y8Ng7/

Just remove that ridiculous margin you have for the nav and increase the li padding

li {
    display:inline;
    padding: 10px 40px;
}

To center a div element, don't do margin: 21px 646px 21px 646px;

just do margin: 21px auto;

Upvotes: 11

Benjamin
Benjamin

Reputation: 1

Rather than trying to manipulate the list items, try adding your padding to the anchor. Ex:

#menu li a { padding: 10px; display: block; }

Upvotes: 0

Related Questions