Отображение изображения в диапазоне без преобразования его в элемент уровня блока

Question

Я немного запутался здесь.У меня есть текстовое поле и справа от текстового поля, я хочу вставить значок справки.я вставил это в промежуток.проблема в том, что я не хочу делать этот промежуток блоком, потому что он идет вниз.Есть ли другой способ отобразить это изображение, не превращая его в элемент уровня блока?

Код здесь:

<input name="firm" type="text" id="firm" size="20" /><span id="helpico"></span>

CSS:

#helpico{ background:url(images/question.png) left top; width:16px; height:16px;}

Answer 1

Вы можете использовать этот CSS:

#firm 
{
   float: left;
}
#helpico
{ 
   background:url(images/question.png) left top; 
   width:16px; 
   height:16px;
   display: block;
   float: left;
}

Вы должны использовать блок дисплея, чтобы включить ширину и высоту и принять другие стили.Но чтобы противостоять вашей проблеме «спуска», вы можете установить оба элемента влево, и они будут оставаться встроенными в родительском элементе.

Имейте в виду, что если значок относительно содержимого, он долженбыть включенным в тег <img> и атрибут alt.

---

Убедившись, что вы не хотите использовать плавающие элементы ИЛИ блок отображения, остается только один путь, используйте display: inline-block;.

Пример для вас здесь .:)

Answer 2

Не можете ли вы использовать тег img для изображения? Это покажет inline.

Обычно img не будет отображать вашу иконку на довольно высокой высоте (она будет слишком далеко). Для этого используйте либо выравнивание по вертикали (часто сработает нижний текст), либо используйте положение: относительное и верхнее: 3 пикселя или около того на изображении.

<input name="firm" type="text" id="firm" size="20" /><img id="helpico" src="images/question.png">

CSS

#helpico { vertical-align:text-bottom; }

Answer 3

Оберните оба элемента в div, сделайте интервал блоком и задайте стиль CSS float: left для тегов input и span.

<div id="wrap">
    <input name="firm" type="text" id="firm" size="20" />
    <span id="helpico"></span>
</div>

И CSS

#helpico { 
    background:url(images/question.png) left top; 
    width:16px; 
    height:16px;
    display: block;
    float: left;
}

#firm {
    float: left;
}