Question

如何实现以下目标：

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

label与左侧对齐
button与右侧对齐
text-box占据父
paragraph与左侧对齐，也必须与label左对齐

label和button都应遵守其他地方定义的尽可能最大的字体属性。 parent在窗口中居中对齐，当然，可以有任意宽度。

请告知。

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

演示：http://jsfiddle.net/wdm954/626B2/4/

Answer 2

我不喜欢第一次使用＆＃34;无表格＆＃34;实际使用table-cell的版本。也不是使用实际表格的第二个答案。也没有使用硬编码宽度的第三个答案。这是使用 flex 的解决方案。这是最简单的：

＆＃13;

#parent {
  display: flex;
}
input {
  flex: 1;
}

＆＃13;

<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>

＆＃13;

Answer 3

使用表格。：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>

Answer 4

我知道如何实现这个或类似的唯一方法是将“文本框”作为块元素自动填充父级的整个宽度，然后在左侧和右侧应用填充等于左侧和右侧容器的总宽度。然后使“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％）。

Answer 5

别忘了，你可以使用calc()。我们假设label和button使用的总宽度为100px（包括边距），则宽度为：

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

如果您认为它不支持大量浏览器，那么您确实错了。它现在支持很多。时间已经改变

Answer 6

如果分配 float: right 并按下按钮（或几个按钮按相反顺序）之前，则无法使用flex和table 输入框。

然后使用 float: left 放置标签，输入框 100％宽度并将其包含在范围中< strong> display: block 和 overflow: hidden 。

没有任何魔法：

＆＃13;

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

＆＃13;

在输入框之前以相反的顺序指定所有右侧按钮的基本思路。

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

6 个答案: