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

尝试

#plusimage{
    display:inline;   
}

Answer 4

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>

如何显示内联邮件

4 个答案: