HTML CSS导航栏间距

我做了一个CSS导航栏，但是在每个“navbar-item”之间，都有一点空间。我不希望那里有任何变化！有没有办法做到这一点，而不改变每个navbar-item的余裕？HTML 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>

enter image description here

来源

2013-10-25 UnhandyFir9

标识** **必须是唯一的。 – j08691

j08691：这不会影响渲染，所有浏览器仍然会正确应用样式。这是一个违反标准的行为，会打破当然的验证，并且令人难以置信地搞砸Javascript。 –

@NielsKeurentjes - 我说它影响渲染还是会解决问题？ – j08691

首先，

#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

来源

2013-10-25 01:59:06

-1

要快速解决您的问题，您可以与跨度包裹你的链接，并给它一个黑暗的背景：

<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-25 02:00:29

你不应该试图快速解决它，而是尝试修复什么是坏的。 -1 –

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

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

来源

2013-10-25 02:02:38

正如我在我的评论中提到的，ID必须是唯一的，所以请使用类。这就是说，你的链接是内联元素，并且对空白区域很敏感，所以要么将它们浮起，要么删除代码中元素之间的空白区域。

例：

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

jsFiddle example

空格去掉jsFiddle example

来源

2013-10-25 02:02:41 j08691

试试这个;

.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-25 02:03:48

使用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-25 02:08:32

HTML CSS导航栏间距

回答

相关问题