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

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

我在一个web公式集中有一个文本输入元素，在一个较大的div中，具有定义的宽度

在这个较大的div中，我将放置一个span text，比如“Name:”，然后我将输入

我希望输入自动变宽，尽可能扩大span未使用的div的空间。

代码如下所示：

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

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

到目前为止，我已经跳过了这个问题，为每个元素定义了不同宽度的内联样式。但如果我改变字体、大小或其他任何东西，它会爆炸

我不喜欢建造一堵堡垒墙，让它充满了狙击手的洞。这就是我寻求帮助的原因：）

---

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

对不起，但是用那个标记是不可能的。实际上，唯一的方法是使用表（或显示：table cell等，但在IE7或更早版本中不起作用）。通常情况下，将所有输入对齐会更好，你不认为吗？

将

输入的
显示：块
更改为
显示：内联
，我认为它应该可以工作

这里有一个例子
从语义上讲，最好使用标签标签：

<label>Name:</label>

名称：

关于您的问题，请看一看CSS3柔性箱模型：

或者，如果您喜欢视频：

在撰写本文时，Mozilla和Webkit支持这一点，其他浏览器也有退路：
这纯粹是一个技术问题，属于StackOverflow（请不要将其转发到那里，如果有足够多的人同意并投票在这里关闭它，它将自动迁移）。名称是您唯一的标签吗？你能给它一个固定的宽度吗？他希望输入的宽度是“100%-跨度宽度”，这不行。
<label>Name:</label>