Hiển thị hình ảnh trong khoảng thời gian mà không cần chuyển đổi hình ảnh thành yếu tố cấp khối

Question

Tôi hơi bối rối ở đây. Tôi có một txtbox và bên phải của txtbox, tôi muốn chèn một biểu tượng trợ giúp. tôi đã chèn nó vào một nhịp. vấn đề là tôi không muốn làm cho khoảng này một khối vì nó đi xuống sau đó. có cách nào khác để hiển thị hình ảnh này mà không biến hình ảnh này thành thành phần cấp khối không?

Bộ luật goes here:

<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

Quấn cả các yếu tố trong một div, làm cho khoảng một khối và đưa ra một phong cách CSS của float: left cho cả đầu vào và thẻ span.

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

Và CSS

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

#firm { 
    float: left; 
} 

Answer 2

Bạn có thể sử dụng CSS này:

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

Bạn phải sử dụng khối hiển thị để cho phép chiều rộng và chiều cao và phải chấp nhận phong cách khác. Nhưng để chống lại vấn đề của bạn về nó "đi xuống" bạn có thể thiết lập cả hai yếu tố để trôi nổi trái và họ sẽ vẫn nội tuyến trong phần tử cha.

Lưu ý rằng nếu biểu tượng có liên quan đến nội dung, nó phải được bao gồm với thẻ <img> và thuộc tính alt.

---

Sau khi thấy rằng bạn không muốn sử dụng phao HOẶC khối hiển thị, chỉ còn một chiều, sử dụng display: inline-block;.

Example for you here. :)

Answer 3

Bạn không thể sử dụng thẻ img cho hình ảnh? Điều đó sẽ hiển thị nội tuyến.

Thông thường, img sẽ không hiển thị biểu tượng của bạn ở độ cao đẹp (nó sẽ quá xa). Sử dụng một trong hai dọc-align cho rằng (thường văn bản dưới cùng sẽ làm việc ra) hoặc sử dụng vị trí: tương đối và hàng đầu: 3px hoặc hơn trên img.

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

css

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