html - 如何内联显示消息

Question

我有一个显示加号的图像，并且在图像旁边显示一条小消息。代码如下：

<table id="plus" align="center">
<tr>
<th>
<input type="image" src="Images/plussign.jpg" name="plussign" width="30" height="30" id="plusimage"><span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>

我遇到的问题是消息并没有真正显示在图像旁边。图像高 30 像素，但消息从底部 10 像素高处开始显示。如何让图像旁边的消息正确显示在图像中。

下面是css：

#plusimage{
    clear:right;    
}        

#plussignmsg{
    font-size:10px; 
    display:inline;
}  

Answer 1

尝试这个：

#plusimage{
    float:left;   
}        

#plussignmsg{
    font-size:10px; 
    display: block; float:left;
}  

最近我发现将容器显示为表格，内容作为表格单元格也可以。

Answer 2

试试float图片

#plusimage{
    float: left;
}

Answer 3

Use this. I have added css class for align image to vertical middle.

<style type="text/css">
    #plusimage
    {
        vertical-align:middle;
    }
   </style>
   <table id="plus" style="width:100%; text-align:center;">
        <tr>
            <th>
                <input type="image" src="Images/add_user.png" name="plussign" id="plusimage"><span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
            </th>
        </tr>
    </table>

Answer 4

尝试

#plusimage{
    display:inline;   
}