Question

我正在使用css进行布局练习，而且我遇到了一个我不知道如何解释的奇怪的事情。以下图像中以红色突出显示的空间来自何处，如何消除它？

enter image description here

HTML：

<body>
<div class="menu-bar">
    <ul>
      <li>
        <a href="#home">Home</a>
        <ul>
            <li><a href="#beachouse">Beach House</a></li>
            <li><a href="#skicabin">Ski Cabin</a></li>
            <li><a href="#countrycottage">Country Cottage</a></li> 
        </ul>
      </li>
      <li>
        <a href="#news">News</a>
        <ul>
            <li><a href="#worldnews">World News</a></li>
            <li><a href="#nationalnews">National News</a></li>
            <li><a href="#localnews">Local News</a></li> 
        </ul>
      </li>
      <li>
        <a href="#contact">Contact</a>
        <ul>
            <li><a href="#emailaddress">Email Address</a></li>
            <li><a href="#phonenumber">Phone Number</a></li>
            <li><a href="#postaladdress">Postal Address</a></li> 
        </ul>
      </li>
      <li>
        <a href="#about">About</a>
        <ul>
            <li><a href="#aboutme">About Me</a></li>
            <li><a href="#aboutyou">About You</a></li>
            <li><a href="#aboutus">About Us</a></li> 
        </ul>
      </li>
    </ul>
</div>

</body>

CSS：

body {background: #77c4d3; padding:1%; }

div.menu-bar{position: relative; max-width: 700px;}

/*Styles for both menu and submenus: */
div.menu-bar ul { list-style-type: none; margin: 0; padding:20px; background: gray;} 
div.menu-bar li { background:white; text-align:center; display:inline-block; padding:10px;}

/*Menu-specific styles: */
div.menu-bar > ul {width: 100%;}
div.menu-bar > ul > li {width:20%; border:0; margin: 0; padding-top: 10px; padding-bottom: 10px;}

/* Submenu-specific styles */
div.menu-bar ul ul {background-color: blue; padding-left: 10px; padding-right: 10px;}

/*Hide any unodered lists that are descendents of a list element by default*/
div.menu-bar li ul { 
  display: none;
}

/*Select any unordered lists that are children of list elements that are being hovered on.*/
/* The <ul> is display:block, but the individual <li> elements are inline-block, which is what matters.*/
div.menu-bar li:hover > ul {
  display: block;
  position: absolute;
}

Answer 1

来自<ul>下面的<div class="menu-bar">包裹。它的宽度在你的css中设置为100%，你说：

div.menu-bar > ul {
     width: 100%;
}

由于按钮没有完全占用<ul>中的空间，因此会有一些额外的灰色空间。如果您为该样式添加text-align: center;，它将很好地将按钮居中，如下所示：

div.menu-bar > ul {
     width: 100%;
     text-align: center;
}

或查看my JSFiddle for this。

Answer 2

每个导航项的宽度取决于其文本内容。它不知道它的父母有多宽。每个导航项只是向左推，因为它可以在它的邻居旁边。

如果您希望导航项均匀填充栏，则需要使用flex解决方案。有关完整说明，请参阅here。

Answer 3

这里有几件事需要注意。

1。）您的代码中有空格，位于最顶层<li>之间。这是一个有空白的时髦问题。 CSS-Tricks有a great summary的问题。基本上，您必须将您的结束</li>标记与下一个开放<li>标记背对背，以消除这些微小的空白。

2.）其次，您的宽度设置为20％。你可以把它提高到几十分之一，达到25％......尽管你会注意到这会将你<li>的最后一个推到一条线上。这是因为......

3。）div.menu-bar li上有一个10px填充，它将10px填充应用于左，右，上，下。您的div.menu-bar > ul > li规则指定顶部和底部填充，但左侧和右侧保持不变。我的个人方法是什么？

4.。）使用box-sizing。通过将此CSS属性设置为border-box，您的填充将包含在元素的宽度中。换句话说，您可以设置以下CSS：

div.menu-bar > ul > li {
width: 25%;
margin: 0;
padding: 12px;
box-sizing: border-box;
}

...你最终会得到一组列表项目，这些列表项目之间没有任何时髦的小空间，而且b）都在同一条线上。

希望有所帮助！

导航栏均匀间距

3 个答案: