Question

我无法在同一行上对齐两个元素。例如，我有一个登录表单，我有一个用户名字段和一个密码字段。我希望布局是这样的：用户名:(用户名字段）密码:(密码字段）我试图让外部div有一个最大宽度，比方说500px。如果窗口宽度减小到500px以下，则div中的元素将调整大小，例如，用户名字段将调整大小（同时，使用标签保持INLINE）。但是，如果我使用float或display：inline，则会发现username字段将在标签下方换行，然后调整为更小的宽度。无论如何要防止这种影响？我知道使用表可以消除这种情况，但我想知道是否有任何方法可以在不使用表的情况下完成。另外考虑可用性（div有显示：表格，但IE7不适合css值。）请提前帮助我，谢谢！

Answer 1

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

Answer 2

这是calc()派上用场(supported by 5 major browsers, but not all mobile)的地方。

我们给标签一个静态宽度（我认为110px看起来不错），找到标签上的总余量（在这种情况下没有），并找到持有输入的div的总余量（在这种情况下没有）。包含15个左右的备用像素也是一个坏主意，这样渲染引擎就有空间（特别是display: inline-block）。

110px + 0 + 0 + 15px = 125px;

最后，我们想要添加media query以确保我们的更改在问题发生之前不会发生任何变化：

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

由于样式表巨大，需要进行一些更改才能获得your desired results。

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>

HTML显示内联的两个元素，能够水平调整大小而不包装

3 个答案: