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

Question

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

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

如果我同时使用display: inline-block设置两个元素，并将输入框的宽度设置为100%，则会跳到下一行，因为100%没有考虑到空间-图标大小...

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

在 jsFiddle 上演示了这个问题。

- BrunoLM

Answer 1

这个版本比ianaré的版本简单一些，并且可以在IE6中使用：

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

- RoToRa

Answer 2

尝试这个...

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

---

不支持IE7。但它可以在IE8+和其他浏览器上运行。这正是我想要的。谢谢。 - BrunoLM

如果您使用display: table，display: table-row和display: table-cell，为什么不使用<table>？在2000年之后使用表格是一种罪过吗？ - Edwin Jarvis

@Augusto：哈哈，我以为可以不用表格来实现它。但看起来不可能。我要使用表格。我只是好奇是否有更简单的方法来实现它。 - BrunoLM

@Augusto - 使用"display：table"等并不像使用"<table>"那样存在相同的无障碍问题。也就是说，屏幕阅读器不会在内容之前朗读“一行两列的表格”。对于一个布局表格来说，这不是一个大问题，但如果有很多这样的表格，最好的情况也会很烦人，最坏的情况下会使页面难以理解。 - Alohci

@Alohci 但是你知道，如果像表格一样发出嘎嘎声，那么它很可能就是一张表格，在CSS中看起来就像鸭子类型！ - Edwin Jarvis

@Augusto - 对的。但我的观点是，尽管它看起来像只鸭子，但它根本不会嘎嘎叫。 - Alohci

Answer 3

float:left; 用于图标。 请参见，http://jsfiddle.net/sUYBS/11/

- Robin Maben

---

为什么要踩这个问题？使用浮点数可以解决你的问题，不是吗？ - Robin Maben

+1 表示简单易懂。此外，这比接受的答案更兼容。 - Joeri Hendrickx

是的。老实说，我同意这不是最令人满意的结果，但我总是倾向于坚持简单的方式，少一些标记，少一些代码。 - Robin Maben

最令人满意的结果？你错了。输入框没有占用所有可用空间。你删除了 width: 100%。它确实保持了两个元素在同一行（我已经通过设置 display: block 实现了这一点），但它并没有使输入框占据剩余的空间。 - BrunoLM

Answer 4

我认为答案是vertical-align: middle，但请参考理解 vertical-align 或者说“如何（不）垂直居中内容”

- Dan D.

---

据我所知，问题不在于垂直居中；而是让这两个元素水平并排坐着，同时使第二个元素扩展以填充可用空间。 - Karl Knechtel

如果您想让图标与输入框在同一行，但是让输入框填充其余空间，即尽可能宽，请使用此方法。 - Dan D.

垂直对齐与输入占用空闲空间有什么关系？ - BrunoLM

Answer 5

尝试使用 display: table-cell。

- Karl Knechtel

---

你可以把它放在与 display: inline-block 相同的位置。至于测试不同的浏览器，你需要自己解决，但这绝对是标准的 CSS。 - Karl Knechtel

嗯，我在jsFiddle上尝试了一下，但它似乎不像我预期的那样工作。 :( - Karl Knechtel

Answer 6

你尝试在图标中使用 align="absmiddle" 了吗？

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

- mspir

---

图标的垂直对齐方式与输入占用自由空间有什么关系？ - BrunoLM