javascript - jQuery UI 图标问题 - 如何只显示图像

使用 jQuery UI 图标，我只想显示与其余图标一致的图标(“只显示图标，没有换行符等)。基本上我想在使用 jQuery UI themes for my page 时获得一行可点击的图像。

这里有一些我尝试过的事情:

1: <div style="display:inline-block;width:20px;height:20px" class="ui-icon ui-icon-trash"/>
2: <input type="image" onclick=".." class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />

1:完全搞乱了布局。
2:在图像周围给我一个额外的换行符

-- 作为请求更广泛的上下文 --

 <tr class="ui-widget-content">
   <td>...</td>
   <td>
      <input name="xy" id="xy" type="text" size="5" />
      <input name="xz" id="xz" type="text" size="5" />
      <input type="image" onclick="...;" class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />
    </td>
  </tr>

- 跨度 -

使用 span 导致与上述相同，图标显示但在其自己的行中。

  <span class="ui-icon ui-icon-carat-1-n"></span>

最佳答案

我认为关键是制作图标容器 display: inline-block 。

<div style="display: inline-block" class="ui-state-default">
    <span class="ui-icon ui-icon-lightbulb"></span>
</div>

请参阅此示例: http://jsfiddle.net/2U5TN/1/ 。

此外，您可能会发现此页面很有用: http://jquery-ui.googlecode.com/svn/trunk/tests/static/icons.html 。它显示您可以与 jQuery UI CSS 一起使用的所有可能的图标。

关于javascript - jQuery UI 图标问题 - 如何只显示图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6962483/