Форум

zukalo · #1 (**permalink**) 29.08.2011, 20:23

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

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

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

Octane · #2 (**permalink**) 29.08.2011, 21:08

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