我设计了一些带有按钮内部按钮的输入，当我使用固定宽度时，这似乎是一个好主意。例如，输入的宽度为205px，提交按钮的宽度为40px，使用padding，display:block和position:absolute。
但是现在我在不同的布局中使用这些输入，例如在页脚中，有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>
我使用:before中的伪选择器<span>插入图标。所以提交按钮的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)来解决这个问题，但我不确定，因为w3c验证器在这个语法上有一个错误，我正在制作一个产品功能是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();
});