Html 带有display:inline呈现为display:block的Span标记

我有一个这样的跨度标签

<td>
<s:textfield name="trnfr" id="trnfr"/>
<span id="trnfrm" style="width:10px;display:inline;">
  &nbsp;
  <a onClick="showCal('trnfrm')"><img src="./images/cal.gif" border="0"
  alt='<s:text name="Co.Cal" />' /> </a>
</span>
</td>

' /> 

它应该呈现为

但它是这样呈现的

<td>
<s:textfield name="trnfr" id="trnfr"/>
<span id="trnfrm" style="width:10px;display:inline;">
  &nbsp;
  <a onClick="showCal('trnfrm')"><img src="./images/cal.gif" border="0"
  alt='<s:text name="Co.Cal" />' /> </a>
</span>
</td>

当我在浏览器中查看源代码时，它是这样呈现的

<td>
<s:textfield name="trnfr" id="trnfr"/>
<span id="trnfrm" style="width:10px;display:inline;">
  &nbsp;
  <a onClick="showCal('trnfrm')"><img src="./images/cal.gif" border="0"
  alt='<s:text name="Co.Cal" />' /> </a>
</span>
</td>

不知道出了什么问题

---

注意：通过在浏览器中将display:block更改为display:inline，我获得了正确的图像。

这肯定是CSS问题。请提供更多数据。

您无法在CSS中轻松重写，因为元素被设置为

display:block

inline（在您的HTML中），很可能是您使用的框架（很难说没有更多细节）

因此，您可能需要防止设置此项，将其删除（即使用JS）或在CSS中覆盖它

要在CSS中重写，您需要使用

！重要信息

，例如：

#trnfrm{
  display:inline!important;
}

也就是说，请注意

的使用！重要信息是。理想情况下，您应该设法解决根本原因

当一个<代码>！重要信息

规则用于样式声明，此 声明将覆盖CSS中的任何其他声明（无论在何处） 它在申报单上。尽管如此，

！重要信息

与此无关 具有特异性。使用！重要的是不好的做法，因为它使 调试很困难，因为您破坏了您的系统中的自然级联 样式表

---

在span标签中插入锚定标签和img标签不是理想的编码方式。将它们包装在一个div标记中，该标记是类“trnfr”的块元素和样式，div应该是display:inline block“

听起来像是一些JavaScript将其转换为块。如果有的话，你能给我们看看相关的JS吗？如果没有，请尝试

float:left

@Chen Asraf:这是一个JS覆盖它以阻止找到根本原因。谢谢你的提示。这对我很有效。将尝试找到根本原因，谢谢。@BaN3-一点也不，很乐意帮助：）编辑后的答案已发布。