html - HTML は 2 つの要素をインラインで表示し、折り返しなしで水平方向にサイズ変更できます

Question

2 つの要素を同じ行に揃えるのに問題があります。たとえば、ログイン フォームがあり、ユーザー名フィールドとパスワード フィールドがあります。レイアウトを次のようにしたいと思います: ユーザー名: (ユーザー名フィールド) パスワード: (パスワード フィールド) 外側の div が最大幅、たとえば 500px になるようにしようとしていました。ウィンドウの幅が 500 ピクセル未満になると、div 内の要素のサイズが変更されます。たとえば、ユーザー名フィールドのサイズが変更されます (同時に、ラベルでインラインのままになります)。ただし、float または display:inline を使用すると、ユーザー名フィールドがラベルの下に折り返されてから、幅が小さくなることがわかります。とにかく、この影響を防ぐには？テーブルを使用するとこれが解消されることはわかっていますが、テーブルを使用せずにそれを行う方法があるかどうか知りたいです。使い勝手も考慮（divはdisplay:table、

Answer 1

ここでcalc()が役に立ちます ( 5 つの主要なブラウザーでサポートされていますが、すべてのモバイルではサポートされていません)。

ラベルに静的な幅を与え (110px が適切だと思います)、ラベルの合計マージンを見つけ (この場合はなし)、入力を保持する div の合計マージンを見つけます (この場合はありません)。15 程度の予備のピクセルを含めることも悪い考えではありません。これにより、レンダリング エンジンが奇妙になる余地があります (特に を使用する場合display: inline-block)。

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

最後に、メディア クエリを追加して、問題が発生する前に変更によって何も変更されないようにします。

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

スタイルシートが巨大なため、目的の結果を得るにはさらにいくつかの変更を加える必要がありました。

Answer 2

入力の幅を合計幅のパーセンテージとして設定できます。のように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>