web-dev-qa-db-ja.com

親ブロック内の残りの幅をすべて占めるようにテキスト入力ボックスを作成する方法は？

以下をどのように達成しますか？

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘
  • labelは左揃えです
  • buttonは右揃えです
  • text-boxは親内の残りの幅をすべて占有します
  • paragraphは左揃えで、labelも左揃えにする必要があります

labelとbuttonの両方は、他の場所で定義されたフォントプロパティを可能な限り従う必要があります。 parentはウィンドウ内で中央に揃えられ、当然、任意の幅にできます。

お知らせ下さい。

blockcss
40
user422039

更新済み[2016年10月]：Flexbox version ...

form {
  display: flex;
}
form input[type="text"] {
  flex: 1;
}
<form>
  <label>Name</label>
  <input type="text" />
  <button>Submit</button>
</form>
<p>Lorem ipsum...</p>

元の回答[2011年4月]：（テーブル動作の）テーブルレスCSSバージョン...

<div id="parent">
    <div id="inner">
        <label>Name</label>
        <span><input id="text" type="text" /></span>
        <input id="submit" type="button" value="Submit" />
    </div>
    <p>some paragraph text</p>
</div>

CSS ...

#inner {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
}
span {
    display: table-cell;
    width: 100%;
    padding: 0px 10px;
}
#text {
    width: 100%;
}
#submit {
    display: table-cell;
}

デモ： http://jsfiddle.net/wdm954/626B2/4/

53
wdm

私は実際にテーブルセルを使用する「テーブルレス」バージョンの最初の回答が好きではありません。実際のテーブルを使用する2番目の回答もありません。ハードコードされた幅を使用する3番目の回答もありません。 flexを使用した解決策を次に示します。それははるかに簡単です：

#parent {
  display: flex;
}
input {
  flex: 1;
}
<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>
13
asdjfiasd

テーブルを使用します。 ：D人々はテーブルを嫌う傾向があることを知っていますが、彼らはこの状況で働くでしょう...

<div id="parent">
    <table style="width:100%">
        <tr>
            <td>label</td>
            <td style="width:100%">
                <input type="text" style="width:100%">
            </td>
            <td>
                <button>clickme</button>
            </td>
        </tr>
    </table>
</div>
10
Thomas Shields

calc()を使用できることを忘れないでください。 labelとbuttonで使用される幅の合計が100px（マージンを含む）であると仮定すると、幅は次のようになります。

.text-box {    
  width: calc(100% - 100px);
}

あなたがそれが多くのブラウザをサポートしないと思うなら、まああなたは確かに間違っています。現在多くをサポートしています。時間は変わった

2
Aminah Nuraini

これを達成する方法を知っている唯一の方法は、親の幅全体を自動的に埋めるブロック要素として「テキストボックス」を持ち、左右の合計幅に等しいパディングを適用することです左右のコンテナ。次に、「label」要素と「button」要素の位置をrelativeに設定し、必要な場所にフロートします（float：left、float：right）。

何かのようなもの、

HTML：

<div id="parent">
    <div id="label">label</div>
    <div id="button">button</div>
    <div id="text-box">
        text<br />
        text<br />
        text<br />
        text<br />
        text
    </div>
</div>

CSS：

div#label
{
    position: relative;
    float: left;
    width: 200px;
    background: #F00;
}

div#button
{
    position: relative;
    float: right;
    width: 120px;
    background: #0F0;
}

div#text-box
{
    padding-left: 200px;
    padding-right: 120px;
    background: #00F;
}

ボタン要素とラベル要素に幅を設定する必要がない場合、すべての要素の幅をパーセント値で指定できます（合計で100％になります）。

2
Marty

Assign float: rightそして、ボタン（またはいくつかのボタンを逆順）に入れますbefore入力ボックス。

次に、ラベルをfloat: left、入力ボックス100％幅を指定し、spanでdisplay: blockおよびoverflow: hidden。

魔法は関係ありません：

<div style="width:100%">
  <button style="float:right">clickme 2</button>
  <button style="float:right">clickme 1</button>
  <label style="float:left">label</label>
  <span style="display:block;overflow:hidden">
    <input type="text" style="width:100%"/>
  </span>
</div>

入力ボックスの前にすべての右側のボタンが逆の順序で指定されるという基本的な考え方。

0
Brian Haak