Javascript-форум - Кроссбраузерная вёрстка + резиновый input

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Кроссбраузерная вёрстка + резиновый input (https://javascript.ru/forum/xhtml-html-css/21119-krossbrauzernaya-vjorstka-rezinovyjj-input.html)

Кроссбраузерная вёрстка + резиновый input

Возникала необходимость сверстать такой элемент :
[картинка] [резиновый input] [картинка] [ссылка] [картинки]

Причём всё это нужно центрировать по вертикали относительно друг друга, т.е. чтобы горизонтальные осевые линии всех элементов совпадали.
Сделал через вложенные слои, вышло коряво.

Ни один рецепт резинового inputа не подошёл - он либо растягивается
на 100% элемента, либо отображается некорректно. С центрированием другая проблема - это можно делать через margin/padding слоев относительно друг друга, а можно через параметр align картинки (absmiddle). Каждый способ работает в своём, отдельном случае, а всё вместе не даёт нужного эффекта. Как быть?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.field .controls {
	float: right;
}
.field .icon {
	float: left;
}
.field .text {
	overflow: hidden;
}
.field .text .inner {
	margin: 0 10px;
}
.field .text input {
	width: 100%;
}
.field img {
	vertical-align: middle;
}
</style>
</head>
<body>
	<div class="field">
		<div class="controls">
			<img src="http://javascript.ru/forum/images/editor/resize_0.gif" width="21" height="9" alt="icon">
			<a href="#">сброс</a>
			<img src="http://javascript.ru/forum/images/editor/resize_1.gif" width="21" height="9" alt="icon">
		</div>
		<div class="icon">
			<img src="http://javascript.ru/forum/images/smilies/blink.gif" width="20" height="20" alt="icon">
		</div>
		<div class="text">
			<div class="inner">
				<input type="text">
			</div>
		</div>
	</div>

	<br>

	<div class="field" style="width: 300px;">
		<div class="controls">
			<img src="http://javascript.ru/forum/images/editor/resize_0.gif" width="21" height="9" alt="icon">
			<a href="#">сброс</a>
			<img src="http://javascript.ru/forum/images/editor/resize_1.gif" width="21" height="9" alt="icon">
		</div>
		<div class="icon">
			<img src="http://javascript.ru/forum/images/smilies/blink.gif" width="20" height="20" alt="icon">
		</div>
		<div class="text">
			<div class="inner">
				<input type="text">
			</div>
		</div>
	</div>
</body>
</html>

Цитата:

Сообщение от zukalo

Сделал через вложенные слои, вышло коряво.

Мог бы и тестовый пример показать...

Octane, не нужны никакие float'ы!

zukalo, inline-block решит проблему. И vertical-align будет нормально работать.

display:inline-block;

display:inline;
zoom:1;

для IE

tropiko, зачем тут inline-block, каким образом блок с инпутом на доступную ширину растягивать в таком случае?

Octane, ох, протупил :(
В общем, с резиновым инпутом бред написал я, простите =)

А inline-block для того чтобы выровнять по вертикали.