Wyświetl obraz w zakresie bez konwersji na element blokowy

Question

Jestem trochę zdezorientowany tutaj. Mam txtbox i na prawo od txtbox, chcę wstawić ikonę pomocy. wstawiłem to w rozpiętość. Problem polega na tym, że nie chcę, aby ta rozpiętość była blokiem, ponieważ wtedy spada. czy istnieje inny sposób wyświetlania tego obrazu bez przekształcania go w element blokowy?

Kodeks idzie tutaj:

<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

Wrap oba elementy div, sprawiają, że rozpiętość blok i dać styl CSS float: left zarówno do wejścia i tagi span.

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

I CSS

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

#firm { 
    float: left; 
} 

Answer 2

tej można użyć CSS:

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

trzeba użyć bloku wyświetlacza, aby umożliwić szerokości i wysokości oraz przyjąć inne style. Aby jednak przeciwdziałać twojemu problemowi "zejścia na dół", możesz ustawić oba elementy w lewo, pozostając w linii wewnątrz elementu nadrzędnego.

Należy pamiętać, że jeśli ikona jest względna w stosunku do zawartości, należy ją dołączyć do zmiennej <img> i atrybutu alt.

---

Po obejrzeniu, że nie chcesz używać pływaki lub blok wyświetlacza, istnieje tylko jeden sposób, w lewo, użyj display: inline-block;.

Example for you here. :)

Answer 3

Nie możesz użyć znacznika img do zdjęcia? To wyświetli się w tekście.

Ogólnie img nie wyświetla ikony na dość wysokości (będzie zbyt daleko). Użyj do tego wyrównania w pionie (często wypisane jest na dole tekstu) lub użyj position: relative and top: 3px lub inaczej na img.

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

css

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