Question

我有一个行为很差的div。似乎有一些非常长的文本被放入div中，它导致div中的图标换行到下一行。如何阻止这种令人抓狂的行为？

.itemStyle {
  border: 1px solid #cccccc;
  border-radius: 6px;
  display: inline-block;
  padding: 3px 3px 3px 3px;
  white-space: nowrap;
  margin: 0;
  /*overflow: hidden;*/
  height: 20px;
}

.SearchIconStyle {
  cursor: pointer;
  margin-top: 2px;
  margin-right: 2px;
}

<div style="max-height: 175px; overflow-y: auto; width: auto;">
  <table id="tblSelectedItem" runat="server">
    <tbody>
      <tr>
        <td>
          <div class='itemStyle'>
            <div style='float: left; border: 0; min-width: 245px;'>&nbsp;</div>
            <div style='display: inline-block; float: left; border: 0;'>
              <img src="~/Images/search.png" id="imgSearch" alt="Select Items" runat="server" class="SearchIconStyle" />
            </div>
          </div>
        </td>
      </tr>
      <tr>
      </tr>
    </tbody>
  </table>
</div>

Click this link to displays the results of how this misbehaving div acts.

Answer 1

你有没有尝试过 ALIGN =＆＃34;顶部＆＃34;在文字和图标上？可以工作

Answer 2

在两个内部div上使用display：inline-block。

<div style="max-height: 175px; overflow-y: auto; width: auto;">
  <table id="tblSelectedItem" runat="server">
   <tbody>
     <tr>
      <td>
       <div class='itemStyle'>
         <div style='display: inline-block; border: 0; min-width: 245px;'> 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789</div>
          <div style='display: inline-block; border: 0;'>
           <img src="~/Images/search.png" id="imgSearch" alt="Select Items" runat="server" class="SearchIconStyle" />
           </div>
          </div>
          </td>
         </tr>
        <tr>
      </tr>
     </tbody>
   </table>
 </div>

Answer 3

我们能够通过删除浮动并更改其他一些支持JavaScript来解决这个问题，我相信..

感谢大家的好建议。周末真棒!!

div中的长文本将图标推送到下一行。我怎么阻止这个？

3 个答案: