html - 如何使用 CSS 自动调整表单元素的宽度？

Question

最近我在单一情境问题上经历了很多次:

我在网络公式中有一个文本输入元素，在定义宽度的更大 div 中。

在那个更大的 div 中，我将放置一个跨度文本，例如“姓名:”，然后我将放置输入。

我希望 auto 的输入变得与 span 未使用的 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;
}

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

到目前为止，我一直在通过为每个元素定义不同宽度的内联样式来跳过这个问题。但如果我更改字体、大小或其他任何内容，它就会爆炸。

我不喜欢 build 一堵堡垒墙，然后给狙击手留下千疮百孔。这就是我寻求帮助的原因:)

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

Answer 1

从语义上讲，为此目的使用 label 标签更好:

<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