当父div宽度减少到0

Question

我在我的div上应用white-space: nowrap;，因为我将它的宽度缩小到0.这给了我所追求的东西，因为它缩小了，一切都保持不变并消失。这有效，直到div变得非常薄，然后输入字段跳到标签下方。

标签和输入字段按以下方式设置：

<div class="k-edit-label" style="margin-top: -6px;">
    <label for="someInput">Some Input</label>
</div>
<div data-container-for="someInput" class="k-edit-field" id="someInputContainer">
    <textarea id="someInput" name="someInput" class="k-textbox" data-bind="value:someInput" style="width: 100%;"></textarea>
</div>

图中显示了所发生的事情：

并且每个标签/输入对都包含在div中，我将white-space:nowrap;应用到我将其宽度缩小为0.不执行白色空间：nowrap，输入更快地跳到标签下方。使用nowrap，他们会做我想要的，直到div包装器变得非常薄。

然而，我想要的是那张“我想要发生什么”的形象。我只是希望标签和输入滑出视野，不会移动或跳到任何地方。

哦，是的，我的编辑标签和编辑字段的CSS：

.k-edit-label {
    width: 25% !important;
}

.k-edit-field {
    margin-left: 10px;
    float: left !important;
    width: 65% !important;
}

在减少父div的宽度时，任何有关如何设计此样式以防止内容移位的帮助将非常感激。

Answer 1

请尝试： 1. display: inline-block而非浮动方法 2.添加overflow:hidden，以防您在此div中包含其他内容和textarea。

.k-edit-label {
    display: inline-block;
    width: 25% !important;
}

.k-edit-field {
    display: inline-block;
    margin-left: 10px;
    width: 65% !important;
    overflow: hidden;
}