0

この jsfiddle、以下のコードのようなページがあります。

html:
<div class="parent">
  <div class="child">
    <input type="text">
    <input type="submit">
  </div>
</div>

css:
.parent { width: 500px; }
.child { width: 100%; }

一緒に親divの幅の100％を占めるようにするにはどうすればよいですか（それに応じてテキスト入力が伸びます）？

明確にするために：行内のボタンを固定幅にし、入力が親の残りの幅を占めるようにして、一緒に幅=親幅になるようにします。行にボタンがない場合は、テキスト入力が幅全体を占めるようにしたいと思います。

4

3 に答える 3

0 
.parent { width: 500px; margin:auto; }
.child { width: 100%; }

これを追加して、入力を全幅に伸ばします

.child input { width: 100%; }
于 2013-06-30T03:40:57.560 に答える
0

これを行うには多くの方法があります。display:table-xこれを行う 1 つの方法は、属性を使用することです。

div入力要素を独自のでラップすると、次のようになります。

<div class="parent">
    <div class="text">
        <input type="text" />
    </div>
    <div class="button">
        <input type="submit" />
    </div>
</div>

次に、親を としてスタイルしdisplay:table、ラッパー div を としてスタイルし、次のようdisplay:table-cellに に幅を与えます。div.button

.parent {
    width: 500px;
    background-color:blue;
    display:table;
}
.text {
    display:table-cell;
}
.text input {
    width:100%;
    -webkit-appearance:none;
}
.button {
    display:table-cell;
    background-color:red;
    width:100px;
}

次に、探している結果を得ることができます: http://jsfiddle.net/QpCCD/9/

于 2013-06-30T03:47:49.633 に答える
0

これは @panindra の投稿に似ていますが、両方の入力を同じ行に保持します。画面上の位置を確認できるように、サンプルに色を追加しました。

<html>
<head>
<style type="text/css">
    body { background-color: black; }
    .parent { width: 500px; background-color: white; text-align: center; }
    .child { width: 100%; position: relative; margin: 0px 0px 0px 0px; border: 0px; }
    .child input { width: 49%; margin: 0px 0px 0px 0px; border: 0px; }
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <input type="text">
    <input type="submit">
  </div>
</div>
</body>
</html>

実際には、これはより近いでしょう：

.child input { width: 248px; }
于 2013-06-30T04:16:02.287 に答える