如何将图标和输入文本放在同一行上？ [英] How can I put an icon and an input text on the same line?

问题描述

  
 
我想在左边放一个图标，在右边放一个输入类型文本，占用所有剩余空间。 -------------------------------------------------- -  
 | [ico] ---------------------------------------- | 
 | | input type =text| | 
 | ---------------------------------------- | 
 ---------------------------------------------- ------ 
  

如果我同时使用 display：inline-块并将输入的宽度设置为 100％ 它跳过行，因为 100％是不考虑空格 - icosize ...

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

sUYBS /rel =nofollow> jsFiddle问题的一个例子

解决方案

ianaré的版本稍微复杂一点，可以在IE6中使用： $ b http://jsfiddle.net/sUYBS/23/

I want to put an icon on the left and an input type text on the right occupying all the remaining space.

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

If I set both with display: inline-block and set the input's width to 100% it jumps the line, because 100% is not considering the space - icosize...

I want to expand the input to the remaining available space (I don't care for vertical align). Is there a way to achieve this behavior without using tables?

An example of the problem on jsFiddle.

解决方案

A bit less complicated that ianaré's version and works in IE6:

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

这篇关于如何将图标和输入文本放在同一行上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！