带显示的跨度标记：内联呈现为display：block

Question

我有这样的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>

它应该呈现为

但它是这样呈现的

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

不知道什么是错的。

注意：我通过更改display：block to display获得了正确的图像：在浏览器中动态内联。

Answer 1

您无法在CSS中轻松覆盖，因为该元素被设置为display:block inline（在您的HTML中），可能是您正在使用的框架（很难说没有进一步的细节）。

因此，您需要阻止设置，删除它（即使用JS）或在CSS中覆盖它。

要在CSS中覆盖，您需要使用!important ，例如：

#trnfrm{
  display:inline!important;
}

也就是说，请注意不建议使用!important 。 理想情况下，您应该寻找修复根本原因。

当在样式声明上使用!important规则时，此声明将覆盖CSS中的任何其他声明，无论它在声明列表中的何处。 虽然， !important与特异性无关。 使用！important是不好的做法，因为它会破坏样式表中的自然级联，从而使调试变得困难。

Answer 2

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

Answer 3

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