如何强制图像图标和跨度超过一行的文本使第一行与图像图标对齐？

Question

当跨度文本长于一行时，它与图像图标的对齐方式不正确。我该如何实现？

当前，如果图像和跨度文本显示在一行中，则其正确对齐。

我尝试了以下操作：

<table>
  <tr>
    <TD>
      <INPUT type=text id="item_name" name=item_namelength=25 maxlength=100 value="<%=item_name%>" onchange="verifyItemInfo()">
      <TD><span id="signalSrc">
    <img  align="top" src="../images/warning.png"></span> </TD>
      <TD><span class=dfb9 id="ajaxGetItems" style="color: #ff0000;  
    display: inline-block;">There is a really long text which goes to the 
    next line and then the alignment doesnt work</span> </TD>
  </TR>
</table>

Answer 1

如果我正确地猜到了您所需要的内容，则可能是由于内容为vertical-align: middle而造成的“错位”。要解决此问题，您可以尝试根据需要添加line-height和vertical-align: top。

tr {
  line-height: 20px;
  vertical-align: top;
}

<table>
  <tr>
    <TD>
      <INPUT type=text id="item_name" name=item_namelength=25 maxlength=100 value="<%=item_name%>" onchange="verifyItemInfo()">
      <TD><span id="signalSrc">
    <img  align="top" src="https://via.placeholder.com/20"></span> </TD>
      <TD><span class=dfb9 id="ajaxGetItems" style="color: #ff0000;  
    display: inline-block;">There is a really long text which goes to the 
    next line and then the alignment doesnt work. Long Long Long Long Long Long Long</span> </TD>
  </TR>
</table>