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

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

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

如果我用

display:inline block

设置这两个选项，并将输入的宽度设置为

100%

，则会跳行，因为

100%

不考虑

空格-icosize

我想将输入扩展到剩余的可用空间（我不喜欢垂直对齐）。有没有一种方法可以在不使用表的情况下实现此行为


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

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


我认为答案是
垂直对齐：中间
，但请参见尝试
显示：表格单元格
浮动：左侧用于图标。
请参见，
试试这个

<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>

比ianaré的版本稍微简单一点，在IE6中工作：

AFAICT的问题不是垂直定心；让两个元素并排水平放置，同时让第二个元素展开以填充可用空间。嗯，如果您希望ico与输入在同一行上，但输入要填满剩余空间，即尽可能宽，垂直对齐与输入占用自由空间有什么关系？您将其放在与
显示：内联块
相同的位置。您可以自己测试各种浏览器，但它绝对是标准的CSS。嗯，我在JSFIDLE上使用过它，但它似乎不像我预期的那样工作（为什么投反对票？浮点数实际上解决了你的问题，不是吗？+1为简单起见。另外，这比公认的答案兼容得多。是的。老实说，我确实同意这不是最令人满意的结果，但我总是倾向于坚持更简单的方式，更少的标记，更少的代码。最令人满意的结果？你搞错了。输入不占位。）正在删除所有可用空间。您删除了
宽度：100%
。它确实将两个元素保持在同一行上（我已经通过设置
显示：块来执行此操作）但是它不会让输入占据剩余的空间。在IE7上不起作用。但是它在IE8+和浏览器上起作用。这就是我一直在寻找的。谢谢。如果你使用一个显示：表格，一个显示：表格行和一个显示：表格单元格，为什么他妈的不是一个？2000年后使用表格是一种罪恶吗？@Augusto:haha，我想这是可能的我想让它没有表格。但这似乎是不可能的。我打算使用表格。我只是想知道是否有更简单的方法来实现它。@Augusto-display:table等，与使用
没有相同的可访问性问题。例如，屏幕阅读器不会读取“一行两列的表格”内容之前。对于一个布局表来说，这不是一个大问题，但很多布局表充其量会让人讨厌，最坏的情况是会让页面无法理解。@Alohci但你知道，如果嘎嘎像一个表，它可能是一个表，看起来像鸭子在CSS中打字！图标的垂直对齐与占用空闲空间的输入有什么关系？