Как заставить значок изображения и текст, длина которого превышает одну строку, выровнять 1-ую строку по значку изображения? - PullRequest
Новая
       8

Как заставить значок изображения и текст, длина которого превышает одну строку, выровнять 1-ую строку по значку изображения?

0 голосов
/ 18 октября 2019

Если текст в интервале длиннее одной строки, он не выравнивается по значку изображения. Как я могу это сделать?

В настоящее время, если изображение и текст промежутка присутствуют в одной строке, они правильно выровнены.

Я попробовал следующее: 

<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>

1 Ответ

0 голосов
/ 18 октября 2019

Если я правильно угадываю, что вам нужно, «неправильное выравнивание» может быть связано с тем, что содержимое 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>
...