How do I reduce the horizontal space between my menu items [Home, About Us,…] is CSS?

Question

I would like to manually reduce the horizontal space between my menu items so that I can be able to add other links without increasing the width of the menu bar.

Below is the image of my menu bar:

And here is my CSS code:

 #menu li{ text-decoration: none; float: left; display: block; width: 150px; height: 60px; text-align: center; line-height: 55px; font-family: Tahoma,san-serif; font-size: 17px; margin: 0px; } 

Answer 1

Rely on line-height and padding instead of height and width . Try this:

#menu li {
    text-decoration: none;
    float: left;
    display: block;
    text-align: center;
    line-height: 1.5;
    font-family: Tahoma,san-serif;
    font-size: 17px;
    margin: 0;
    padding: 20px 15px;
}

Answer 2

Remove width Or give auto from li and give padding . So, it will works well if your menu text have more character.

#menu li {
    display: block;
    float: left;
    font-family: Tahoma,san-serif;
    font-size: 17px;
    height: 60px;
    line-height: 55px;
    margin: 0;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    width: auto;
}

Working Fiddle

Answer 3

Change width to auto, to get the width to be the size of the word

#menu li{
   width: auto;
}

or change the actual size of the width

 #menu li{
   width: 120px;
}

And then add padding padding:0 5px;

Answer 4

Why don't you do away with width / dimensions for the li 's and use the anchor elements within them to style them (add padding, borders, etc)?

I assume you've got a layout similar to the below:

 ul#menu { list-style-type: none; background-color: red; } ul#menu li { display: inline-block; box-sizing: border-box; } ul#menu li a { padding: 10px 20px; display: block; background-color: #fff; border: 1px solid #000; } 

 <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">FAQ's</a></li> <li><a href="#">Contact</a></li> </ul> 

Using the above format means you can control the margins between the outer li 's ( ul#menu li { margin-left: 5px; } for example) easier, without fear of messing up the styling of the menu items / links themselves.

Answer 5

Reduce the width of you li . sometimes people want a fixed width of li but good practice are use padding . Try to preview Snippet in full width.

 ul li{ text-decoration: none; float: left; display: block; width: 120px; height: 60px; text-align: center; line-height: 55px; font-family: Tahoma,san-serif; font-size: 17px; margin: 0px; background: gray; border-right:1px solid #fff; } ul li:last-child{ border-right:0px; } 

 <ul> <li>Home</li> <li>About Us</li> <li>Services</li> <li>Technology</li> <li>Contact</li> <li>new</li> <li>new</li> </ul> 

Answer 6

try this.

 #menu{ float:left; background:black; width:100%} #menu li{ text-decoration: none; float: left; display: block; max-width: 150px; height: 60px; text-align: center; line-height: 55px; font-family: Tahoma,san-serif; font-size: 17px; margin: 0px; width:100%; background:red; border-right:1px solid green; } 

 <ul id="menu"> <li>Home</li> <li>About Us</li> <li>Blog</li> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> 

This is also a method to resolve your problem.