Question

最近我经历了很多次单一情况问题：

我在网站处方中有一个文字输入元素，在更大的div中定义宽度。

在更大的div中，我会设置一个跨度文本，如“Name：”和然后我会输入。

我希望输入自动变为范围未使用的div的空间。

代码将是这样的：

<div>
    <span>Name:</span>
    <input type="text" name="name" />
</div>

CSS：

div {
   width: 200px;
   display: block;
}

span {
   display: inline-block;
   font: 11px 'Lucida Sans', Verdana, Arial;
}

input {
   height: 20px;
   width: auto;
   display: block;
}

我一直在做一些研究，但我似乎无法找到解决这个问题的精确解决方案。

到目前为止，我一直在通过为每个元素添加定义不同宽度的内联样式来跳过此问题。但如果我改变字体，大小等等，它就会爆炸。

我不喜欢建造一个堡垒墙，并为狙击手留下了很多洞。这就是为什么我在寻求帮助:)

如果你们有任何建议，解决方案或解决方法，我很高兴知道。 = D谢谢。

Answer 1

很抱歉，但该标记无法实现。实际上，唯一的方法是 shudder 使用表格（或显示：table-cell等，但在IE7或更早版本中不起作用）。通常看起来更好地将所有输入对齐，你不觉得吗？

Answer 2

从语义上讲，最好为此目的使用标签标签：

<label>Name:</label>

关于您的问题，请查看CSS3灵活的盒子模型：http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

或者如果您更喜欢视频：http://www.youtube.com/watch?v=-OubGOxKa5I

在撰写本文时，Mozilla和Webkit支持此功能，其他浏览器也有后备支持：https://github.com/doctyper/flexie

Answer 3

将display: block更改为display: inline input，我认为它应该有用。

这是一个例子 http://jsfiddle.net/KYvzM/

如何使用CSS自动扩展表单元素？

3 个答案: