Question

我创建了一个CSS Navbar，但在每个“navbar-item”之间，空间很小。我根本不希望有一个anyspace！有没有办法在不改变每个导航栏项左边距的情况下实现这一点？

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

enter image description here

Answer 1

问题出在display:inline-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 example

已删除空格 jsFiddle example

Answer 3

首先，

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

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

我很确定这个空间来自于此，但我会做一个小提琴来测试，

display：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;默认情况下使用内联块将具有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;

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

HTML CSS Navbar Spacing

6 个答案: