Я хочу сделать следующее:
IMG INPUT TEXT INPUT TEXT SUBMIT
и все это сосредоточено, поэтому я не могу использовать просто плавающее. Все, что у меня есть:
<img src="lws_img.gif" />
<form>
<input type="text" placeholder="1" name="1" />
<input type="text" placeholder="2" name="2" />
<input type="submit" />
</form>
Кроме того, все входные тексты + должны быть такими же высоченными, как и изображение.
использовать это:
HTML
<form>
<img src="lws_img.gif" />
<input type="text" placeholder="1" name="1" />
<input type="text" placeholder="2" name="2" />
<input type="submit" />
</form>
CSS
form{ text-align:center }
form img, form input{
display:inline-block;
}
display:table
также является решением
демо: http://jsfiddle.net/sS8HB/3/ Вверх
demo2: http://jsfiddle.net/sS8HB/4/ Выровненный по центру
CSS
.master{
display:table;
}
.img,.frm{
display:table-cell;
vertical-align:top; /* for top aligned */
/*vertical-align:middle; /* for middle aligned */
}
HTML
<div class="master">
<div class="img">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
</div>
<div class="frm">
<form>
<input type="text" placeholder="1" name="1" />
<input type="text" placeholder="2" name="2" />
<input type="submit" />
</form>
</div>