表格单元格中的jQueryUI图标

Question

我在表格中使用jQuery UI图标，它们占据了表格单元格的大小，这是水平拉长的。

问：要使图标的宽度与高度相同，需要什么样的html / css？ 这是我到目前为止所做的：

<td class="delete">
<div class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>

Answer 1

不完全确定这是否是您想要的，但是您可能需要设置div的行为以使其不会100％填充。像这样：

<table>
<td class="delete">
<div class="ui-state-default ui-corner-all" style="display:table">
<span class="ui-icon ui-icon-circle-minus"></span>
</div>
</td>
</table>

更改div的显示样式，使其不会缩放到最大宽度。

Answer 2

我不知道你是想要一个特定于jQuery的答案还是只是一个css答案。因为我不知道前者是后者。如果要将宽度限制为已知像素并调整高度以使其保持适当的宽高比，则可以使用类似

的样式

img{width=32px; height= auto;}

应该做的伎俩。由于大多数图标都是正方形且已知大小，我认为

img{width=32px; height=32px;} 

也会解决。

Answer 3

我不明白。您确定页面中的其他一些CSS不会导致此问题吗？

jQuery UI CSS使用background-image属性来显示图像，通常这些图像不应该“占用其父级的大小”。

我将快速jsFiddle放在一起，内容如下：

<强>依赖关系：

1. jQuery 1.5.1
2. jQuery UI 1.8.9
3. http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css

<强> HTML：

<table>
    <tr>
        <td class="delete">
            <div class="ui-state-default ui-corner-all">
                <span class="ui-icon ui-icon-circle-minus"></span>
            </div>
        </td>
        <td class="delete">
            <div class="ui-state-default ui-corner-all">
                <span class="ui-icon ui-icon-arrowthick-1-w"></span>
            </div>
        </td>
    </tr>
</table>
<br />
<table>
    <tr>
        <td class="delete">
            <div class="ui-state-default ui-corner-all">
                <span class="ui-icon ui-icon-circle-minus"></span>
                Hello
            </div>
        </td>
        <td class="delete">
            <div class="ui-state-default ui-corner-all">
                <span class="ui-icon ui-icon-arrowthick-1-w"></span>
                world!
            </div>
        </td>
    </tr>
</table>

<强> CSS：

/* Extend the width ... */
td.delete { width: 100px;  }

它在谷歌浏览器中看起来很好：



是否有针对您的特定浏览器？你能提供一个具体的例子吗？

Answer 4

如果您期望的结果是包装在圆形框中的图标，那么您必须将容器div设置为16px的宽度，如下所示：

http://jsfiddle.net/marcosfromero/n2tYP/

#wanted .delete div {
    width: 16px;   
}