테이블 셀의 jQueryUI 아이콘

Question

테이블에서 jQuery UI 아이콘을 사용하고 있으며 테이블 셀의 크기가 가로로 늘어납니다.

Q : 아이콘을 만들기 위해 필요한 html/CSS는 높이와 동일한 너비입니까? 는 여기에 지금까지 가지고 무슨이 당신이 원하는,하지만 100 %를 기입하지 않도록 어쩌면 당신이 사업부의 동작을 설정해야

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

Answer 1

:

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

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

Answer 2

완전히 확실하지합니다. 이와 같이 :

<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; } 

그리고 구글 크롬에서 잘 찾고 나왔다 :

이가 일어나고 특정 브라우저가 있습니다 너를 위해서? 구체적인 예를 들어 줄 수 있습니까?당신이 기대하는 결과가 다음 컨테이너가 여기에 같은 16px의 폭, div에 설정해야하는 둥근 상자에 포장 아이콘 인 경우