HTML CSS导航栏间距_Html_Css_Navbar_Spacing

HTML CSS导航栏间距

html css

HTML CSS导航栏间距,html,css,navbar,spacing,Html,Css,Navbar,Spacing,我制作了一个CSS导航栏，但在每个“导航栏项”之间，几乎没有空间。我根本不想有任何空间！有没有一种方法可以在不改变每个导航栏项目的剩余边距的情况下实现这一点 <!doctype html> <html> <head> <title>Home - UnhandyFir9</title> <style> #wrapper {

我制作了一个CSS导航栏，但在每个“导航栏项”之间，几乎没有空间。我根本不想有任何空间！有没有一种方法可以在不改变每个导航栏项目的剩余边距的情况下实现这一点

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


家-不愉快之家9
#包装纸{
盒影：0px 0px 20px 10px黑色；
左：0px；
顶部：0px；
保证金：自动；
边缘顶部：30px；
宽度：800px；
背景色：rgb（200200200）；
字体系列：无衬线；
}
#顶部通知{
显示：内联块；
宽度：100%；
高度：20px；
背景颜色：浅蓝色；
文本对齐：居中；
}
#导航条磁芯{
宽度：100%；
高度：30px；
背景颜色：浅绿色；
}
#导航栏项目{
显示：内联块；
宽度：100px；
高度：30px；
文本对齐：居中；
背景颜色：绿色；
颜色：白色；
}
你好！我们的网站是最近发布的，所以你可能会看到很多错误！对不起==

首先

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

将其更改为

class

，而不是

id

<代码>Id是唯一的，在一个页面上只能使用一次，但一个类可以反复使用

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

显示：内联块

您可以更改

显示：内联块到<代码>浮动：左侧并在没有空格的情况下使用它
要快速解决问题，您可以使用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>

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

使用具有相同ID的多个元素是错误的，但不会导致此问题-但仍应予以修复。
正如我在评论中提到的，ID必须是唯一的，因此请改用类。也就是说，您的链接是内联元素，并且对空格很敏感，所以要么将它们向左浮动，要么删除代码中元素之间的空格
例：

删除空白
试试这个
.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>

.navbar项{
显示：块；
浮动：左；
宽度：100px；
高度：30px；
文本对齐：居中；
背景颜色：绿色；
颜色：白色；
}
你好！我们的网站是最近发布的，所以你可能会看到很多错误！对不起==
使用浮动：左而不是显示：内联块使用内联块将有4px的边距，但使用float:left没有空格。并为每个元素使用类
无id，id是唯一的，不应重复
.navbar-item {
     /*display: inline-block;*/
     float: left;
     width: 100px;
     height: 30px;
     text-align: center;
     background-color: green;
     color: white;
}

如果仍要使用内联块
而不是浮点：左你应该使用左边距：-4pxID必须是唯一的。j08691:这不会影响渲染，所有浏览器仍将正确应用样式。这是一种违反标准的行为，当然会破坏验证，并且会令人难以置信地扰乱Javascript。@NielsKeurentjes-我是说它会影响渲染还是会解决问题？你不应该尝试快速解决它，而应该尝试修复损坏的内容-1.
.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>

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