1

これは、満足のいく回答が得られなかったため、今日の私の質問の簡略版です。

私はこのフィドルのようなHTMLとCSSコードを持っています：http：//jsfiddle.net/wNGHz/

<input>親フレームのサイズが変更されたときに自動的にサイズ変更するにはどうすればよいですか？

ノート：

  • JavaScriptではなくCSSのみを使用することを好みます。
  • 親の<input>左端と右端から100pxの距離が必要です。
4

3 に答える 3

2

@thirtydot意味的にはもっとシンプルなHTMLが欲しいです。ラップ <input>することはできます<div>が、別の要素をスタイリングするという唯一の目的のために、もう1つの要素を追加するのは奇妙です。誰かがもっと良い解決策を持っているかどうか疑問に思いました。

残念ながら、これ以上の方法はありません。inputこれは、が置換された要素であるという事実と関係があります。つまり、などの置換されていない要素とは異なる動作をしdivます。

1つの違いは、（WebKitを除いて）position: absolute; left: 0; right: 0と同じようにはinput機能しないことです。div

input最善の回避策は、をdiv：でラップすることです。

http://jsfiddle.net/thirtydot/wNGHz/6/

<div class="inputContainer">
    <input type="text" value="test" />
</div>

.inputContainer {
    position: absolute;
    left: 50px;
    right: 50px;
}
input {
    width: 100%;
    background-color: red;
    color: white;
    border: none;
}

を持っている場合はinput { width: 100%; }、通常、を追加box-sizing: border-boxして、いずれかを作成paddingしborder、次のinput内部でカウントすることをお勧めします：http width: 100%: //jsfiddle.net/thirtydot/wNGHz/7/

于 2012-04-08T14:14:55.977 に答える
0

%私が知っている唯一の純粋なCSSの方法は、http ：//jsfiddle.net/PeeHaa/wNGHz/1/に幅を追加することです。

于 2012-04-08T14:01:41.453 に答える
0

あなたはこれをより良い方法で行うことができます。

<div class="inputContainer">
<input type="text" value="test" />
</div>


input {
width: 100%;
margin:0 100px;
}
于 2012-04-08T14:49:07.943 に答える