Создание поля ввода текста с правой стороны изображения

Question

У меня есть изображение 50x50 и поле <input type="text" />, которое я хочу расположить с правой стороны изображения. Я пробовал это:

<img src="missing-image.png" />
<div name="image_input">
    <input type="text" />
</div>

И с этим CSS:

#image_input {
    position: absolute;
    top: 10px;
}

Но ввод текста не будет проходить с правой стороны изображения. Также, как вы можете видеть, я хочу, чтобы он был централизован по высоте изображения, и, как я вижу, он тоже не будет работать. Как я могу это исправить?

PS: все, что находится внутри <form>

Answer 1

Абсолютная позиция дает вам больше контроля:

HTML

<div name="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

CSS

div {
    position:relative;
}

input{
    position:absolute;
    right:10px;
    bottom:20px;
}

Answer 2

Попробуйте это:

<div id="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

и CSS:

#image_input img {
  float: left;
  clear: none;
}

Обратите внимание, что я изменил атрибут имени "div" на атрибут id.

Answer 3

Существует несколько способов выравнивания текста по центру рядом с изображением. Вы можете поместить его в список и сделать изображение типом списка. Другая вещь, которую вы можете сделать, это правильно заполнить элемент, чтобы выровнять его по центру.

Answer 4

Попробуйте изменить это на:

<div name="image_input">
    <img src="missing-image.png" />
    <input type="text" />
</div>

И CSS:

.img {
    display: inline-block;
}

Чтобы центрировать высоту, вы можете использовать один из параметров выравнивания по вертикали на входеtag.

, например:

input {
    vertical-align: middle;
}

Я не очень много пользуюсь выравниванием по вертикали, поэтому вам, возможно, придется немного его настроить, чтобы заставить его работать, но смотрите здесь:http://www.w3schools.com/css/pr_pos_vertical-align.asp

---