带显示的跨度标记：内联呈现为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内联（在您的HTML中），可能是您正在使用的框架（很难说没有进一步详细说明）。 / p>

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

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

#trnfrm{
  display:inline!important;
}

尽管如此，请注意!important的使用是not recommended。理想情况下，您应该寻找修复根本原因。

  

在样式声明上使用!important规则时，这个   声明覆盖CSS中的任何其他声明，无论在何处   它在声明列表中。虽然，!important无关   具有特异性。使用！important是不好的做法，因为它使   你努力调试，因为你打破了你的自然级联   样式表。

Answer 2

在span标记内插入锚标记和img标记不是一种理想的编码方式。将它们包装在div标签内，这是一个块元素和类型的样式＆＃34; trnfr＆＃34;和div应该显示：inline-block＆＃34;。

Answer 3

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