Question

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

我的问题在于使用不同的分辨率来适应这个3个内联元素，以适应100％宽度的容器。

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

在小分辨率上，我可能会为INPUT标签写一个新的较小宽度。

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

我想要三个元素在容器中的100％宽度为90％，而不调整span元素的大小，只有INPUT。

我尝试了这个设置宽度：78％的输入标签，但是它适用于大分辨率，如何设置所有分辨率？

仅使用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>

css：

.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

Answer 2

这是你想要的吗？ https://jsfiddle.net/4654eaue/10/

我为容器添加了背景颜色，以便您可以看到它占用了所有内容https://jsfiddle.net/4654eaue/11/

我使用了css calc()

像这样：

input{
    width: calc(100% - 125px);
    vertical-align:top;
    display:inline-block;
    height:23px;
}

所以输入现在是90％的100％（减去span的宽度）

Answer 3

尝试使用display:table，display:table-row，display:table-cell

HTML：

<div class="container">
    <div class="wrapper">
        <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>
</div>

CSS：

.container{
    width:90%;
    display: table;
}
.wrapper {
    display: table-row;
    width: 100%;
}
input{
    vertical-align:top;
    display:table-cell;
    height:23px;
    width: 100%;
}
span img{
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;
}
span{
    vertical-align:top;
    display:table-cell;
    background-color:grey;
    width: 49px;
}

工作示例：https://jsfiddle.net/4654eaue/4/

如何为输入标记

3 个答案: