表格單元格中的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容器的16px的寬度，喜歡這裏的圖標：

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

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

Answer 2

不能完全確定這就是你想要什麼，但也許你需要設置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 3

我不能告訴你是否想要一個jQuery特定的答案或只是一個CSS答案。因爲我不知道前者是後者。如果你想限制寬度已知像素，並具有高度調節，使其保持正確的寬高比，就像

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

風格應該做的伎倆。由於大多數圖標是正方形和已知大小，我會認爲

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

也可以解決。

Answer 4

我不明白。你確定頁面中的其他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; } 

而且它出來的谷歌瀏覽器看起來很不錯：

是否有這種情況發生在一個特定的瀏覽器爲你？你能提供一個具體的例子嗎？