Question

有几天我使用CSS定位和调整大小，我陷入了div元素和按钮元素之间的差距。

Illustration of the gap problem 主持有div具有绿色背景，所包含的div持有者具有粉红色背景。

所以你可以看到div作为标签和文本框持有者之间存在差距，而且在作为按钮持有者的div内置的按钮之间存在差距

我还试图将css重置包括在内而没有成功，我也尝试使用全局选择器来重置填充边距和边框

* {
      padding:0; 
      margin : 0
      border-width: 0;
  }

我真的很想知道如何消除这些差距，以便我的持有人完全控制占用的空间。在所有情况下，这是我非常简单的代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .interactput {
            background-color: green;
        }

        .interactput div {
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-color: lightpink;
        }

        .interactput div button {
            background-color: lightgoldenrodyellow;
        }
    </style>

</head>
    <body>
        <div id="AddessEditor" class="interactput">
            <div>
                <label>This is a label inside a div</label>
            </div>
            <div>
                <input type="text" value="This is input type=text inside a div"/>
            </div>
            <div>
                <button>We are</button>
                <button>Three buttons</button>
                <button>Inside a div</button>
            </div>

        </div>
    </body>
</html>

Answer 1

最后如果在fighting the space between inline block elements找到了确切原因。

正如你在css技巧的建议文章中所读到的那样，带有内联块显示模式的元素之间有一个空格，因为它们之间有空格或换行符，浏览器会将其转换为文本节点。对我来说，建议的解决方案绝对不是易于理解和/或可维护的解决方案。

因此，经过几个小时的谷歌搜索，正确制定问题的问题：我发现使用JQuery可以轻松消除那些文本节点。答案就在Solution to remove text node的stackoverflow上。所以，让我提交我提交的代码示例，让我的控件容器有一个特定的类，我将其命名为“control-container”。

    <div id="AddessEditor" class="interactput">
        <div class="control-container">
            <label>This is a label inside a div</label>
        </div>
        <div class="control-container">
            <input type="text" value="This is input type=text inside a div"/>
        </div>
        <div class="control-container">
            <button>We are</button>
            <button>Three buttons</button>
            <button>Inside a div</button>
        </div>
    </div>

在此之后，我所要做的就是从这些容器中过滤掉text-node并在文档就绪函数中将它们删除...

$(document).ready( function() {
    $('.interactput').contents().filter(function () { return this.nodeType === 3; }).remove();
    $('.control-container').contents().filter(function () { return this.nodeType === 3; }).remove();                
});

魔术！这是我的需要，因为我正在创建一个小部件。希望它会帮助其他人

Answer 2

这就是你想要的......只看这个编辑过的小提琴......

<div id="AddessEditor" class="interactput">
        <div>

http://jsfiddle.net/Qgr77/

Answer 3

喜欢这个

<强> demo

<强> CSS

* {
    padding: 0;
    margin : 0
}
.interactput {
    background-color: green;
    overflow:hidden;
   }

.interactput div {
    float:left;
    overflow: hidden;
    vertical-align: middle;
    background-color: lightpink;
        border: none;
}
.interactput div button {
    background-color: lightgoldenrodyellow;
    border: none;
}
.interactput div input {
    border: none;
}

为什么我的div和按钮之间存在差距

3 个答案: