每个 div 之间的空白不会消失 [CSS]答案

【问题标题】：White spaces in between each div won't go away [CSS]每个 div 之间的空白不会消失 [CSS]
【发布时间】：2014-02-28 05:28:32
【问题描述】：

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

script.js:

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

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

感谢您的所有帮助！

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

【问题讨论】：

下次可以使用jsfiddle.net :D
太棒了，谢谢！ :)
尝试使用 inline-block 并删除潜水之间的空白info link。不要使用浮动，直到您只需要图像跟随文本或对比。 [差异](stackoverflow.com/questions/15172520/…)
对于初学者，不要将块级元素 (<div>) 放入内联级元素 (<a>)。

标签： jquery html css whitespace

【解决方案1】：

这看起来很难看，但试试这个，注意每个 <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>

Here's a fiddle demo I talked about! :D

It's because newlines are interpreted as whitespace :)

【讨论】：

我认为，这不是一个好主意。代码应该在单独的行中清晰。
是的，我知道，它很丑：/

【解决方案2】：

定义浮动：左；在您的 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;}

JsFiddle : http://jsfiddle.net/LDWGf/2/

【讨论】：

【解决方案3】：

已编辑：

首先不要将块级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; }

DEMO

【讨论】：

【解决方案4】：

试试这个短代码 -

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>

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

已解决的示例 - Fiddle

【讨论】：

消除了中间的空白，但左边的那个仍然存在。线条也加倍，有没有办法让它们重叠？
完美，除了上面和左边的空格

【解决方案5】：

对于这个问题我有 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>

【讨论】：

【解决方案6】：

除了上面给出的答案。您可以使用 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

【讨论】：

【解决方案7】：

我相信这就是你要找的。p>

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

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

为了消除菜单项之间的 4px 宽边框，我使用 CSS adjacent-sibling selector 添加了一个负边距以消除超宽边框。

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

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

希望这会有所帮助。

【讨论】：

【解决方案8】：

Check out this demo fiddle

我添加的是这样的：

a{
text-decoration:none;
float:left;
}

*{margin:0;padding:0}//to remove the start white space

【讨论】：