1

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

在此处输入图像描述

4

6 回答 6

1

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

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

于 2013-10-25T02:02:38.880 回答
1

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

前任：

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

jsFiddle 示例

空格删除jsFiddle 示例

于 2013-10-25T02:02:41.113 回答
0

第一的，

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

将其更改为 aclass而不是id. Id是唯一的，并且只能在页面上使用一次，但一个类可以一遍又一遍地使用。

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

显示：内联块；

您可以更改display: inline-block;为float: left;并在没有空间的情况下拥有它。

JSFIDDLE

于 2013-10-25T01:59:06.087 回答
0

试试这个;

.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>
于 2013-10-25T02:03:48.513 回答
0

使用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;

于 2013-10-25T02:08:32.713 回答
-1

为了快速解决你的问题，你可以用 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;
}
于 2013-10-25T02:00:29.200 回答