0

您可能会说这已经被问过，但这是一个带有错误的变体。所以我们都知道用来回答这个问题的技巧： Fixed width div on left, fill remaining width div on right

但是，如果可变宽度元素是输入标签，这将不起作用。

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

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

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

我玩这个已经很久了，它只发生在输入标签上，如果你用一个跨度替换它（默认显示内联但将它设置为显示块）它仍然有效。

知道为什么这只对输入标签不起作用吗？

编辑：为澄清起见，我知道解决方法是将输入放入 div 并将宽度 100% 应用于输入。我的问题是为什么这是必要的，而不是如何解决它。

4

3 回答 3

2

我知道问题所在，样式化表单元素总是让人头疼。

通过将输入包装在正确的 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

于 2015-04-16T10:30:35.237 回答
1

您可以使用 calc 来生成所需的宽度，因为输入被替换的元素具有固有尺寸，就像图像一样

CSS

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

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

在这里演示

于 2015-04-16T10:30:21.463 回答
-1

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

.header{
width:20%;
}
.header-right{
width:80%;
}
于 2015-04-16T10:29:26.607 回答