如何删除css菜单上按钮之间的空格

Posted 2023-04-13

【中文标题】如何删除css菜单上按钮之间的空格

【英文标题】：how can I remove the space between buttons on css menu

【发布时间】：2013-01-07 07:56:09

【问题描述】：

我是 css 和 html5 的新手，并试图让我的菜单栏正常工作。它是一个具有下拉功能的水平菜单栏。在我将菜单栏居中之前，导航按钮和下拉按钮之间没有空格。居中后，它们之间现在有一个令人讨厌的空间，因为当您在它们之间移动时，下拉菜单更是如此，您会因为空间而丢失下拉菜单。因此，我试图删除按钮之间的空间（而不是边框​​）。非常感谢您的帮助，代码如下：

CSS

  /* START NAV MENU */

  nav 
  background-color:#333333;
  height:40px;
  width:100%;
  


  nav ul 
  font-family: Sonoma, Arial;
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align:center;
  

  nav ul li 
  display: inline-block;
  position: relative;

  

  nav li ul  
  display: none; 
  

  nav ul li a 
  display: inline-block;
  text-decoration: none;
  background: #666666;
  color: #ffffff;  
  padding: 5px 20px 3px 15px;
  margin-left: 1px;
  white-space: nowrap;
  height:30px; /* Width and height of top-level nav items */
  width:90px;
  text-align:center;
  border-right: 3px solid black;
  border-left: 3px solid black;

  

  nav ul li a:hover  
  background: #999999; 
  

  nav li:hover ul 
  display: block;
  position: absolute;
  height:30px;
  

  nav li:hover li 
  float: none;
  font-size: 11px;

  

  nav li:hover a  
  background: #534635; 
  height:30px; /* Height of lower-level nav items is shorter than main level */
  

  nav li:hover li a:hover  
  background: #999999; 
  

  nav ul li ul li a 
    text-align:left;
  

  /* END NAV MENU */

用于导航的 HTML：

  <nav>
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About Us</a>
    <ul>
        <li><a href="/crew">Our Crew</a></li>
        <li><a href="/history">History</a></li>
        <li><a href="/vision">Vision</a></li>
    </ul>
  </li>
  <li><a href="/products">Services</a>
    <ul>
        <li><a href="/carpentry">Carpentry</a></li>
        <li><a href="/waterproof">Waterproofing</a></li>
        <li><a href="/concrete">Concrete</a></li>
        <li><a href="/masonry">Masonry</a></li>
        <li><a href="/prop">Property Maintenance</a></li>
        <li><a href="/metal">Metal Construction</a></li>
        <li><a href="/design">Interior Design</a></li>
        <li><a href="/demo">Demo & Salvage</a></li>
    </ul>
  </li>
  <li><a href="/services">Portfolio</a>
  </li>          
  <li><a href="/contact">Contact</a>
    <ul>
        <li><a href="/email">Via Email</a></li>
        <li><a href="/contact_form">Web Form</a></li>
        <li><a href="/pigeon">Carrier Pigeon</a></li>
    </ul>
  </li>
  </ul>
  </nav>

如果您能解释一下为了实现这一点所做的更改以及更改的原因，我将不胜感激，谢谢！

【参考方案1】：

浮动确实是一种选择，但您还有其他可能更可取的选择，因为它们允许您保留内联块样式及其相关优势。

Chris Coyier 的文章与行内块元素 http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 之间的空格作斗争详细介绍了每一个，但总而言之，这是由您的结束 </li> 和下一个 <li> 之间的空白造成的。

您的选择如下：

从每个列表项中删除结束 </li>。

<li><a href="/crew">Our Crew</a>
<li><a href="/history">History</a>
<li><a href="/vision">Vision</a>

它是有效的 HTML5，不会破坏任何东西。

删除空白，这样您的列表标记几乎都在一行中

<li><a href="/crew">Our Crew</a></li><li><a href="/history">History</a></li>
    <li><a href="/vision">Vision</a>

注释掉空格

<li><a href="/crew">Our Crew</a></li><!--
--><li><a href="/history">History</a></li><!--
--><li><a href="/vision">Vision</a></li>

设置父级字体大小为0

ul 
    font-size: 0;

设置负的右边距以缩小间隙

a 
    margin-right: -4px;

我个人更喜欢删除结束标签，因为其他标签看起来太乱而且 font-size: 0 在使用相对大小时效果不太好，但这取决于你，它们都以自己的方式很好。

【参考方案2】：

你必须浮动 <li> 的左边而不是 display:inline-block;

 nav ul li 
  float: left; 
  position: relative;

  

比你必须计算<ul> 的width: 并修复它，还要<ul> 给margin: 0 auto; 以使菜单居中。

nav ul 
width: calculated-width
margin: 0 auto

【讨论】：

实际上没有必要计算宽度，我在这种情况下使用了一种必要的技术，在这里得到了很好的解释：matthewjamestaylor.com/blog/… 这使得保持代码工作更容易，甚至如果您更改导航中的项目。但你在浮动上是绝对正确的！ inline -block 很少是一个好的解决方案！

【参考方案3】：

对边距属性使用负值

margin-right: negative val;

【讨论】：

这可能是一个很好的答案，但您能否添加更多细节。为什么这会解决问题等等。

虽然欢迎使用此代码 sn-p，并且可能会提供一些帮助，但它会是 greatly improved if it included an explanation of how 和 why 这解决了问题。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人！请edit您的答案添加解释，并说明适用的限制和假设。