Question

你可能会说这个已被问过，但这是一个带有bug的变种。所以我们都知道用于回答这个问题的技术： Fixed width div on left, fill remaining width div on right

但是，如果变量width元素是输入标记，则不起作用。

http://jsfiddle.net/8pk4K/2050/

甚至覆盖输入默认的css也没有解决这个问题：

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

我已经玩了很多年了，它只发生在输入标签上，如果用span替换它（默认显示内联但设置为显示块）它仍然有效。

任何想法为什么只有不对输入标签起作用而没有别的？

编辑：为了澄清，我知道对此的修复是将输入放入div并将宽度100％应用于输入。我的问题是为什么这是必要的，而不是如何解决它。

Answer 1

我知道这个问题，造型元素总是会让人痛苦。

通过将输入包装在正确的div中，我想出了这项工作。

<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%;
}

JSFiddle

Answer 2

您可以使用calc来生成您想要的宽度，因为输入是具有内在尺寸的替换元素，就像图像一样

<强> CSS

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

注意：您必须为选择提供尺寸（宽度）或以其他方式为您提供默认的浏览器宽度

<强> DEMO HERE

Answer 3

尝试为.header和.header-right添加％的宽度。像

.header{
width:20%;
}
.header-right{
width:80%;
}

固定宽度元素，可变宽度输入

3 个答案: