Question

我在jQuery-UI主题的fullCalendar中执行以下操作：

var overlay = $('<div />');
   overlay.addClass(event.status);
   if(overlay.hasClass('pending')) {
      primaryIcon = 'ui-icon-check';
    } else {
      primaryIcon = 'ui-icon-cancel';
    }
    overlay.button({ icons: {
      primary: primaryIcon },
      text:false
    });

  overlay.css({
    'cursor': 'pointer',
    'float': 'right'

  });

但我的按钮看起来像这样 - http://cl.ly/2H1j3Z3i3G34271O2E2w

我也试过没有按钮并且在跨度上设置'.ui-state-default .ui-icon'但是背景没有出现。有谁知道这可能导致什么？

我希望这些按钮像第一个图标here一样正方形：

Answer 1

我认为你只需要添加一个添加样式width:auto：

overlay.css({
    'cursor': 'pointer',
    'float': 'right',
    'width': 'auto'
});

参见示例：http://jsfiddle.net/william/Lu3GS/1/。

查看您的代码，您并不需要将它们作为实际按钮。如果是这种情况，您可以考虑使用内嵌图标：http://jsfiddle.net/2U5TN/1/。

Answer 2

我最终将按钮的宽度和高度设置为相等，我还将字体大小设置为零（因此图标图像将位于按钮的中心）。 CSS代码是：

#your_button_id {
   position: relative; 
   font-size: 0; 
   width: 23px; 
   height: 23px;
}

在你的情况下，它将是：

overlay.css({
    'cursor': 'pointer',
    'float': 'right',
    'width': '23px',
    'height': '23px',
    'font-size': '0'
});

为什么我的无文本jquery UI按钮不正方形？

2 个答案: