Question

<td valign="center" colspan="2">
        <a href="" class="table_desc" >
        <span class="desc_info_butt"></span>
        </a>
        text here
</td>


.desc_info_butt{
background:url(Description_Button.png) top left no-repeat;
height:16px;
width:16px;
display:block;
}

出于某种原因，图像和文字出现在两个不同的行上！〜

Answer 1

你需要改变这个：

display:block;

对此：

display:inline-block;

block的行为类似于任何块元素，推动它下面的下一个元素。您需要将其设为inline-block，将其浮动，或者将块样式全部带走。

Answer 2

尝试提供span一个float: left

目前，它是一个块级元素，迫使其他所有内容进入下一行。

顺便说一句，我建议将 放入范围，以便在所有浏览器中显示。

Answer 3

因为您已将范围设置为显示为块级元素。删除display: block，然后修复它。

Answer 4

display：block转换块中的span（相当于div），以便移动新行上的下一个元素

为什么这个跨越文本？我希望它旁边的文字

4 个答案: