HTML CSS导航栏间距

Question

我做了一个CSS Navbar，但是在每个“ navbar-item”之间，空间很小。 我根本不希望有任何空间！ 有没有办法在不更改每个导航栏项目的左边距的情况下实现这一目标？

    <!doctype html>
<html>
    <head>
        <title>Home - UnhandyFir9</title>
        <style>
            #wrapper {
                box-shadow: 0px 0px 20px 10px black;
                left: 0px;
                top: 0px;
                margin: auto;
                margin-top: 30px;
                width: 800px;
                background-color: rgb(200, 200, 200);
                font-family: sans-serif;
            }
            #top-notification {
                display: inline-block;
                width: 100%;
                height: 20px;
                background-color: lightblue;
                text-align: center;
            }
            #navbar-core {
                width: 100%;
                height: 30px;
                background-color: lightgreen;
            }
            #navbar-item {
                display: inline-block;
                width: 100px;
                height: 30px;
                text-align: center;
                background-color: green;
                color: white;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
            <div id="navbar-core">
                <a href="home.html" id="navbar-item">Home</a>
                <a href="lessons.html" id="navbar-item">Lessons</a>
                <a href="aboutus.html" id="navbar-item">About Us</a>
                <a href="donate.html" id="navbar-item">Donate</a>
            </div>
        </div>
    </body>
</html>

Answer 1

问题出在display:inline-block block-将元素简化为内联块，这意味着它们的行为类似于HTML中的所有其他内联内容。 由于锚元素之间存在空格，该空格通常会折叠为单个空格，因此您看到的是当前字体大小之间的实际“空格”，就像句子中单词之间的空格一样。 您可以通过在容器上应用font-size:0来解决此问题，但这很麻烦，因为您必须为孩子重置它。 推荐的方法是只使用float:left并手动正确设置父级的大小，然后将项目设置为height:100% 。

使用多个具有相同ID的元素是错误的，但不会导致此问题-尽管仍应修复。

Answer 2

正如我在评论中提到的那样，ID必须是唯一的，因此请使用类。 话虽如此，您的链接是内联元素，并且对空格敏感，因此可以将它们向左浮动或删除代码中元素之间的空格。

例如：

.navbar-item {
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    background-color: green;
    color: white;
    float:left;
}

jsFiddle示例

删除空格的jsFiddle示例

Answer 3

第一，

#navbar-item {
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    background-color: green;
    color: white;
}

将其更改为class而不是id 。 Id是唯一的，只能在页面上使用一次，但是一个类可以反复使用。

我很确定空间是从这里来的，但是我会做一个小提琴来测试，

显示：inline-block;

您可以更改display: inline-block; float: left; 并没有空间。

JSFIDDLE

Answer 4

尝试这个;

.navbar-item {
  display:block;
  float:left;
  width: 100px;
  height: 30px;
  text-align: center;
  background-color: green;
  color: white;
}

<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
<a href="home.html" class="navbar-item">Home</a>
<a href="lessons.html" class="navbar-item">Lessons</a>
<a href="aboutus.html" class="navbar-item">About Us</a>
<a href="donate.html" class="navbar-item">Donate</a>
</div>

Answer 5

使用float: left; 而不是display: inline-block; 默认情况下，使用inline-block将具有4px的边距，但使用float: left; 默认情况下没有空格。 并且为每个没有id a element使用类，id是唯一的，不应重复。

.navbar-item {
     /*display: inline-block;*/
     float: left;
     width: 100px;
     height: 30px;
     text-align: center;
     background-color: green;
     color: white;
}

如果仍然要使用inline-block而不是float: left; 您应该使用margin-left: -4px;

Answer 6

为了快速解决您的问题，您可以将链接用span包裹起来，并为其提供深色背景：

<div id="navbar-core">
    <span class="navbar-inner-wrapper">
            <a href="home.html" id="navbar-item">Home</a>
            <a href="lessons.html" id="navbar-item">Lessons</a>
            <a href="aboutus.html" id="navbar-item">About Us</a>
            <a href="donate.html" id="navbar-item">Donate</a>
    </span>
</div>

然后将其添加到您的CSS中：

.navbar-inner-wrapper {
    background-color: green;
}