帶顯示的跨度標記：內聯呈現為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問題。 請提供更多數據。