如何使文本输入框占据父块内的所有剩余宽度？

小编典典

如何使文本输入框占据父块内的所有剩余宽度？

css

如何实现以下目标：

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘

label 左对齐
button 右对齐
text-box 占据父级中的所有剩余宽度
paragraph左对齐，label也必须左对齐

二者label并button应服从作为最大尽可能别处定义字体属性。parent在窗口内居中对齐，并且自然可以具有任意宽度。

请指教。

阅读 526

2020-05-16

共1个答案

小编典典

更新 [2016年10月]：Flexbox版本…

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;
}

2020-05-16