Отображать изображение в формате span без преобразования его в элемент блочного уровня

#css #background-image #image #html

#css #фоновое изображение #изображение #HTML

Вопрос:

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

Код приведен здесь:

 <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;}

1. и я также не хочу размещать его. Извините за это.

2. Почему бы и нет? Это лучший способ сделать это!

3. Сделайте одну вещь. Установите display: inline для вашего входного тега.

Ответ №1:

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

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

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

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

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

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

Ответ №2:

Оберните оба элемента в div, сделайте span блоком и придайте 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;
}

Ответ №3:

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

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

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

css

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