HTML CSS 导航栏间距答案

【问题标题】：HTML CSS Navbar SpacingHTML CSS 导航栏间距
【发布时间】：2013-10-25 10:17:37
【问题描述】：

我制作了一个 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>

【问题讨论】：

ID 必须是唯一的。
j08691：这不影响渲染，所有浏览器仍然会正确应用样式。这是一种违反标准的行为，当然会破坏验证，并且会令人难以置信地与 Javascript 混淆。
@NielsKeurentjes - 我是说它会影响渲染还是会解决问题？

标签： html css navbar spacing

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

例如：

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

jsFiddle example

去掉空格jsFiddle example

【讨论】：

【解决方案3】：

试试这个；

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

【讨论】：

【解决方案4】：

首先，

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

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

我很确定这个空间是从这里开始的，但我会尝试一下，

显示：内联块；

您可以将display: inline-block; 更改为float: left; 并且没有空格。

JSFIDDLE

【讨论】：

【解决方案5】：

使用float: left; 代替display: inline-block; 使用inline-block 默认有4px 的边距，但默认使用float: left; 没有空间。并为每个 a element 使用类，没有 id，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;

【讨论】：

【解决方案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;
}

【讨论】：

您不应该试图快速解决问题，而是尝试修复已损坏的问题。 -1