当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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;

}

网友答案:

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;
}
网友答案:

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

网友答案:

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;

网友答案:

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>
网友答案:

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>
网友答案:

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: