html - 如何为输入标签设置全自动宽度

Question

我有 3 个内联元素，第一个是用图像跨度并使用左右填充定义，我不想调整她的宽度，就像现在左右填充宽度一样。

我的问题是不同的分辨率来适应这 3 个内联元素以适应容器全 100% 宽度。

如何在不同分辨率下为 INPUT 设置可调整大小的宽度。

在小分辨率下，我可能会为 INPUT 标签写新的更小的宽度。

是否可以设置可调整大小的输入标签。

我希望三个元素在 90% 的容器中为 100% 宽度，无需调整 span 元素的大小，仅输入。

我试过设置 width:78% of input tag，但是对于大分辨率就这样了，如何设置所有分辨率？

仅使用 HTML 和 CSS 是否可行？

https://jsfiddle.net/4654eaue/4/

HTML

<div class="container">
    <span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span><input type="text" name="fname" value="John Doe" disabled class="profileusername bordertop"><span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span>
    </div>

CSS

.container{
    width:90%;
}
input{
    width:78%;
    vertical-align:top;
    display:inline-block;
    height:23px;
}
span img{
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;
}
span{
    vertical-align:top;
    display:inline-block;
    background-color:grey;
}

Answer 1

好吧，试试这个:

有JSFiddle example

我删除了那些 spans 但添加了一个 div 并将 input 放在他里面。我必须将输入 height 更改为 29px ...使用 display:table; 容器和 img 和div table-cell ....如果你觉得合适。

html:

<div class="container">
    <img src="http://science.psu.edu/alert/icons/video-iconSmall.png">
<div><input type="text" name="fname" value="John Doe" disabled class="profileusername bordertop"></div>
<img src="http://science.psu.edu/alert/icons/video-iconSmall.png">
    </div>

样式:

.container{
    width:90%;
    display:table;
}
.container div {display:table-cell; width:100%; vertical-align:top; }
input{
    width:100%;
    box-sizing:border-box;
    height:29px;
    vertical-align:top;

}
.container img{
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;
    background-color:gray;
    display:table-cell;
}

更新:

有一个示例，其中避免了 input fixed height。与上述解决方案相比，解决方案要好得多。简单，input height 将适合 img height 和其余的总 width容器。

New fiddle example