jQuery UI图标麻烦 - 我如何只显示图像

Question

使用jQuery UI图标我只想显示与其余图标一致的图标("只显示图标,没有换行等).基本上我想得到一行可点击的图像,而我正在使用jQuery UI主题页面.

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

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>

Answer 1

我认为关键是制作图标容器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一起使用的所有可能图标.