html - HTML 内联显示两个元素，能够在不换行的情况下水平调整大小

Question

我无法在同一行上对齐两个元素。例如，我有一个登录表单，我有一个用户名字段和一个密码字段。我希望布局是这样的： 用户名：（用户名字段） 密码：（密码字段） 我试图使外部 div 具有最大宽度，比如说 500px。如果窗口宽度减小到 500px 以下，则 div 中的元素将调整大小，例如，用户名字段将调整大小（同时与标签保持 INLINE）。但是，如果我使用 float 或 display:inline，结果是用户名字段将在标签下方换行，然后它会调整为更小的宽度。无论如何要防止这种影响？我知道使用表格可以消除这种情况，但我想知道是否有任何方法可以在不使用表格的情况下做到这一点。还要考虑可用性（div 有 display:table,

Answer 1

您应该使用 % 而不是 px 或使用媒体查询： https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

这就是calc()派上用场的地方（由 5 个主要浏览器支持，但并非所有移动设备都支持）。

我们给标签一个静态宽度（我认为 110px 看起来不错），找到标签上的总边距（在本例中为无），并在保存输入的 div 上找到总边距（在本例中为无）。包含一个 15 个左右的备用像素也不是一个坏主意，这样渲染引擎就有了奇怪的空间（尤其是display: inline-block）。

110 像素 + 0 + 0 + 15 像素 = 125 像素；

最后，我们希望添加一个媒体查询，以确保我们的更改在问题发生之前不会改变任何内容：

@media (max-width: 767px) {
    .form-group .col-sm-7 {
        width: calc(100% - 125px);
    }
}

由于巨大的样式表，需要进行一些更改才能获得您想要的结果。

Answer 3

您可以将输入的宽度设置为总宽度的百分比。喜欢width:25%。您还可以将每个元素包装在一个 div 中，并在 div 上设置宽度，在输入上设置 100% 宽度。这样会靠谱一点。这是一个例子：

<div class="form-row" style="max-width:500px;min-width:320px;">
    <div style="width:50%;float:left;">
        Username:
    </div>
    <div style="width:50%;float:left;">
        <input type="text" name="username" style="width:100%;"/>
    </div>
</div>
<div class="form-row" style="max-width:500px;min-width:320px;">
    <div style="width:50%;float:left;">
        Password:
    </div>
    <div style="width:50%;float:left;">
        <input type="password" name="password" style="width:100%;"/>
    </div>
</div>