【发布时间】：2012-10-05 11:53:16
【问题描述】：
我正在尝试获取全宽登录表单。基本上，用户名、密码和按钮的输入字段都应该具有相同的长度。现在我可以很容易地使用 spans 得到这个，问题是当我在用户名和密码前面有一个“前置”图标时，输入字段超出了 spans（如果我将 input-block-level 应用于输入）并且按钮 spans只是外跨度变短（如果我尝试 btn-block）。如何让所有元素仅拉伸到包含的跨度宽度？
这是我的小提琴。
【问题讨论】：
【发布时间】：2012-10-05 11:53:16
【问题描述】：
您可以使用 display: table 和 display: table-cell 来获取输入以正确填充跨度中的剩余空间或使用流体宽度。这是第一种方法的小提琴：
或者在基于固定图标宽度 (28px) 和跨度宽度 ((300-28) / 300 * 100) 的输入上使用 width: 90.666%。
【讨论】：
-
谢谢。这样就可以了。在响应时，我还必须考虑附加类的填充变化。由于表格单元，图标集的高度增加了 1px。这行得通。谢谢。
-
我使用 JS 做了一个小解决方案 - 你在这里找到它：codereview.stackexchange.com/questions/15890/… - 实际上这是咖啡脚本，但你可以在这里转换代码：coffeescript.org