0

有几天我使用 CSS 进行定位和调整大小，但我被 div 元素和按钮元素之间的差距所困扰。

间隙问题的插图 主控股 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>
4

3 回答 3

4

最后，如果在这里找到了与内联块元素之间的空间冲突的确切原因。

正如您在有关 css 技巧的建议文章中所读到的那样，具有内联块显示模式的元素之间有一个空格，因为它们之间有一个空格或换行符，女巫被浏览器转换为文本节点。就我自己而言，建议的解决方案绝对不是易于理解和/或可维护的解决方案。

所以，经过几个小时的谷歌搜索，正确地提出问题的问题：S 我发现这些文本节点可以用 JQuery 轻松消除。答案就在 Stackoverflow 上的Solution to remove text node。因此，让我们使用我提交的代码示例，并为我的控制容器创建一个特定的类，我将其命名为“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>

在此之后，我所要做的就是从这些容器中过滤掉文本节点并在文档准备功能中像这样删除它们......

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

魔法！这非常适合我的需要，因为我正在创建一个小部件。希望它会在这里帮助其他人

于 2013-10-11T20:08:00.543 回答
1

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

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

http://jsfiddle.net/Qgr77/

于 2013-10-11T13:14:43.707 回答
0

像这样

演示

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;
}
于 2013-10-11T12:36:39.360 回答