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

我是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 FOR NAV：

<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>

如果你能解释一下为了实现这一目标会发生什么变化以及为什么要改变它我会非常感谢谢谢！

解决方法

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

nav ul li {
  float: left; 
  position: relative;

  }

比你必须计算宽度：< ul>并修复它以及< ul>给予保证金：0自动;使菜单居中.

nav ul {
width: calculated-width
margin: 0 auto
}

原文链接：https://www.f2er.com/css/446697.html

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

解决方法

猜你在找的CSS相关文章