每个 div 之间的空格不会消失 [CSS]

HTML：

<!DOCTYPE html>
<html>
        <head>
        <title>Test Menu</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type='text/javascript' src='script.js'></script>
        </head>
        <body>
        <a href="index.html"><div id="home">Home</div></a>
        <a href="about.html"><div id="about">About Us</div></a>
        <a href="contact.html"><div id="contact">Contact</div></a>
        </body>
</html>

样式表.css：

div {
    background-color: #B3B3B3;
    transition: background-color 0.5s ease;
    display:inline;
    font-size:20px;
    padding:15px;
    padding-bottom:5px;
    padding-right:7px;
    padding-left:7px;
    border:2px solid black;
    color:black;
    position:relative;
}
a{
    text-decoration:none;
}
.active {
    background-color:#556677;
}

脚本.js：

$(document).ready(function(){
    //hover menu
    $('div').hover(function(){
        $(this).addClass('active');
    },function(){
        $(this).removeClass('active');
    });
});

如果你要运行这个，它看起来像这样。但是，我想要这样，但没有任何空白。我意识到float:left;会解决这个问题，但我不希望最左边的空白，我希望边框重叠（即它不会连接在一起并在边缘变成 4px）

感谢您的任何帮助！

编辑：非常感谢大家的帮助，我了解我的问题以及如何解决它！

这

看起来很丑，但试试这个，请注意，没有每个<a>换行

符

<a href="index.html"><div id="home">Home</div></a><a href="about.html"><div id="about">About Us</div></a><a href="contact.html"><div id="contact">Contact</div></a>

这是我讲过的小提琴演示！:D

这是因为换行符被解释为空格:)

定义 float：left; 在你的 DIV CSS 中，即

div {
  background-color: #B3B3B3;
  transition: background-color 0.5s ease;
  display:inline;
  font-size:20px;
  padding:15px;
  padding-bottom:5px;
  padding-right:7px;
  padding-left:7px;
  border:2px solid black;
  color:black;
  position:relative;
  float:left; 
}

还包括下面的CSS，以显示正确的边框宽度：

#home { border-right:0px;}
#contact { border-left:0px;}

小提琴： http://jsfiddle.net/LDWGf/2/

已编辑：

首先不要将块级div元素放在内联元素a内。使用内联元素span而不是块元素div

您的问题：

您已在div标记上应用 css 属性display:inline。当您使用内联元素时，它需要额外的边距。要消除这些边距，下面给出了一个快速修复：

.HTML：

<div class="nav">
    <a href="#">some text</a>
    <a href="#">some text</a>
    <a href="#">some text</a>
</div>

.CSS：

.nav { 
    font-size: 0px; /* set font size 0px to remove white-space of child inline elements */ 
    overflow: hidden; /*for auto height*/ 
}
a { 
    background-color: #B3B3B3;
    transition: background-color 0.5s ease;
    display:inline-block;
    font-size:20px;
    padding:10px;
    border-top:2px solid black;
    border-bottom:2px solid black;
    border-right:2px solid black;
    color:black;
    position:relative;
    text-decoration: none;
    box-sizing: border-box;
}
a:first-child { border-left:2px solid black; }

演示

试试这个短代码 -

网页代码 -

<div>
    <a href="index.html" id="home">Home</a>
    <a href="about.html" id="about">About Us</a>
    <a href="contact.html" class="last" id="contact">Contact</a>
</div>

CSS 代码 -

div{ display:inline-block;}
a{
    float:left;
    padding:8px 15px;
    text-decoration:none;
    font-size:13px;
    color:#000;
    border:1px solid #000;
    border-right:0px;
    background:#b3b3b3;
    transition: background-color 0.5s ease;
}
.last{
    border-right:1px solid #000;
}
.active {
    background-color:#556677;
}

已解决的示例 - 小提琴

我有 2 个解决方案解决这个问题第一个是简单地添加这个 css

body{ font-size:0;}

在第二个中，您有 2 个从 HTML 中删除空格，如下所示

<a href="index.html"><div id="home">Home</div></a><a href="about.html"><div id="about">About Us</div></a><a href="contact.html"><div id="contact">Contact</div></a>

除了上面给出的答案。您可以简单地用 HTML 注释将空格括起来，如下所示：

<div>
    <a href="index.html" id="home">Home</a><!--
    --><a href="about.html" id="about">About Us</a><!--
    --><a href="contact.html" class="last" id="contact">Contact</a>
</div>

这将保持你的html干净，你不需要使用float:left;

在此处查看 JSFiddle

我相信

这就是你要找的。

.HTML

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

.CSS

ul { font-size: 0; }
li { display: inline-block; }
li + li { margin-left: -2px; }
a {
    display: block;
    background: #B3B3B3;
    transition: 0.5s;
    font-size: 20px;
    padding: 15px 7px 5px;
    border: 2px solid black;
    color: black;
    text-decoration: none;
}
a:hover { background: #556677; }

为了消除菜单项之间的空间，我们将font-size设置为在其父容器（ul标记）上0。但是，由于我们希望字体在菜单项本身（<a>标签）上可见，因此我们覆盖了它们上的font-size以20px 。

为了摆脱菜单项之间的 4px 宽边框，我使用 CSS 相邻同级选择器来添加负边距，以摆脱超宽边框。

我还更新了菜单的标记结构，使其更加合理，并删除了JavaScript类驱动的悬停，并将它们替换为纯CSS版本。

这是一个有效的JSFiddle：http://jsfiddle.net/galengidman/Qc9Cz/

希望这有帮助。

看看这个演示小提琴

我添加的是这样的：

a{
text-decoration:none;
float:left;
}
*{margin:0;padding:0}//to remove the start white space

相关内容

最新更新

热门标签：