css - CSS で右にスライドする入力ボックス

Question

入力ボックスを親の右端の間の距離にまたがらせ、必要なだけ左に移動させる方法はありますか?

つまり、私が持っていると仮定します

<div>
    <span>a</span>
    <span>b</span>
    ...
    <input />
</div>

input幅を変更したいのですが、 spansがなければinput全体divに伸びますが、スパンがあると左から縮んでしまうのでしょうか？私はspanjavascriptからsを追加します。

純粋なCSSでこれを行うことは可能ですか?

score 0 · Accepted Answer

はい、技術的には。

CSSのみでそれを行うには、新しいフレックスボックスモデルを使用する必要があります。

div {
  width: 30em;
  display: -webkit-flex;
  display: flex;

input {
  width: 100%;
  flex: 1;
}

候補の推奨をサポートしていない他のブラウザでサポートするには、スパンの数に基づいてパーセンテージベースの幅を追加するためのJavascriptを少し使用するのが最善の策です。

1 に答える 1