我设计了一些带有按钮内部按钮的输入，当我使用固定宽度时，这似乎是一个好主意 . 例如，输入的宽度为 205px ，使用 padding ， display:block 和 position:absolute 提交按钮为 40px width .

但是现在我在不同的布局中使用这些输入，例如在页脚中，有1,2,3或4列，我希望输入宽度适应获取fieldset容器的整个宽度，除了提交按钮的宽度 .

这是HTML结构：

<fieldset class="fieldset">
    <input type="text" class="field" name="s" placeholder="Buscar">
    <span>
        <input value="" type="submit">
    </span>
</fieldset>

我使用 <span> 中的伪选择器 :before 插入图标 . 所以提交按钮的CSS是这样的：

#widget_ID input[type="submit"]{
width: 100%;
height: 100%;
display: block;
border: 0;
outline: 0;
position: absolute;
left: 0;
top: 0;
background-color: transparent;
}

我计划在CSS3中使用 calc(100% - 40px) 来解决这个问题，但我制作了一个产品，其中一个功能是HTML5有效且CSS3有效 .

所以另一个解决方案是使用jQuery . 你会用Javascript来做吗？它过度了吗？这将是这样的代码：

$(document).ready(function(){

    $(window).on('resize', function(){      

        var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
        var inputWidth = $('#widget_ID fieldset').width() - 40;

            $('#widget_ID fieldset input').css('width', inputWidth + 'px');

    }).resize();

});

你会怎么做？提前致谢 ：）

javascript jquery css3 input fieldset