Question

我想在左侧放置一个图标，右侧的输入类型文本占据所有剩余空间。

----------------------------------------------------
| [ico]  ----------------------------------------  |
|        |   input type="text"                  |  |
|        ----------------------------------------  |
----------------------------------------------------

如果我同时设置display: inline-block并将输入的宽度设置为100% ，则跳转，因为100%是不考虑space - icosize ......

我想将输入扩展到剩余的可用空间（我不关心垂直对齐）。有没有办法在不使用表的情况下实现此行为？

An example of the problem on jsFiddle.

Answer 1

ianaré的版本在IE6中有点复杂：

http://jsfiddle.net/sUYBS/23/

Answer 2

float:left;表示图标。请参阅http://jsfiddle.net/sUYBS/11/

Answer 3

试试这个......

<div style="display: table;">
<div style="display: table-row; width:100%;">
    <div style="display: table-cell;">
    <img src="img.png" width="16" height="11" alt="img"/>
    </div>
    <div style="display: table-cell; width:100%;">
    <input type="text" style="width:100%;"/>
    </div>
</div>
</div>

Answer 4

我认为答案是vertical-align: middle，但请参阅Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 5

尝试display: table-cell。

Answer 6

您是否尝试在图标中使用align =“absmiddle”？

<img src="img.jpg" align="absmiddle">

如何将图标和输入文本放在同一行？

6 个答案: