Html 具有可变宽度输入的固定宽度元素

您可能会说，以前有人问过这个问题，但这是一个带有bug的变体。所以我们都知道回答这个问题的技巧：

但是，如果可变宽度元素是输入标记，则此操作不起作用

即使覆盖默认css输入也无法解决此问题：

display: block;
overflow:hidden; 
background-color:green;
height: 100px;
width: auto;

我已经玩了很久了，它只发生在输入标签上，如果你用一个span（默认显示内联，但设置为显示块）替换它，它仍然可以工作

你知道为什么这只对输入标签不起作用而其他什么都不起作用吗

编辑：

---

为了澄清，我知道解决这个问题的方法是将输入放在一个div中，并对输入应用100%的宽度。我的问题是为什么这是必要的，而不是如何修复它。

尝试为.header和.header right添加%宽度。 像

---

您可以使用calc生成所需的宽度，因为输入被替换为具有与图像一样的内在维度的元素

CSS

.header-right{
    display: block;
    overflow:hidden; 
    background-color:green;
    height: 100px;
    border: none;
    width: calc(100% - 240px); //Add this
    }

注意：您必须为选定的浏览器提供一个尺寸（宽度），或者为您提供默认的浏览器宽度

---

我知道这个问题，表单元素的样式设计总是让人头疼

通过将输入包装到正确的div中，我想出了这个解决方案

<div class="header"></div>
<div class="header-right">
    <input type="text" />
</div>

---

您可以使用calc生成所需的宽度：calc（100%-240px）；请注意浏览器支持，因为这是一项实验性技术…@链接只需检查-。。。我认为大多数现代浏览器都支持它。它是安全的。P.A.：至少所有的最新版本都是安全的（除了Opera Mini），在我看来，你应该随时更新你的软件。。。所以这一次我支持你@MikeOram，输入被替换元素具有与图像一样的内在维度。我在回答中添加了一个注释。这很简单…您必须为select指定一个维度（宽度）或以其他方式为您指定默认的浏览器宽度。这既不是我要求的，也不是解决方案谢谢，事实上我已经知道这个问题的解决方法了，我只是不明白为什么这是必要的

<div class="header"></div>
<div class="header-right">
    <input type="text" />
</div>

.header{
    float:left;
    background: #efefef;
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    overflow:hidden; 
    background-color:#000;
    height: 100px;
    position: relative;
    }
.header-right input {
    background: green;
    position: absolute;
    width: 100%;
    height: 100%;
}