html - 当父 div 宽度减小到 0 时，防止移动/移动子 div

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。如果不执行 white-space:nowrap，输入跳到标签下方的速度要快得多。使用 nowrap，他们会做我想做的事，直到 div 包装器变得非常薄。

但是，我想要的是图片中写着“我想要发生的事情”的部分。我只希望标签和输入滑出 View ，而不移动或跳到任何下方。

哦，是的，我的编辑标签和编辑字段的 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 而不是 float 方式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;
}