Question

几乎没有任何代码或样式。似乎jQuery UI元素（在这种情况下 - 选择菜单和按钮）太大了。默认情况下，它们应该非常小，不会高于这句话的最大高度。

我直接从他们的网站上获取了jQuery UI CSS，我也从该项目创建者的网站上同样采用了jQuery选择菜单CSS。即使使用默认代码，问题也没有变化。

任何帮助？

编辑此外，选择菜单右侧没有箭头，因为默认情况下应该如此。看一下项目页面：http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 1

呀。我不明白为什么这是JQuery UI中的默认设置。我认为任何人都不希望按钮那么大。

以下是我如何解决它。将其添加到＆lt; head＆gt;的html文件。

<style type="text/css">
    /* make default button size sane */
    .ui-button-text {
        font-size: .6em;
    }
</style>

Answer 2

这是因为以下样式（style.css，第10行）：

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 25px;
}

#main中的字体大小非常大，而且由于jQuery UI正确地继承了其他样式，因此按钮也很大。

将上面的代码段更改为以下代码，它看起来会更好（至少是按钮）：

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 10px;
}

Answer 3

我发现在那些UI页面中他们有这个css代码：

body { font-size：62.5％; }

所以他们正在大幅度缩小字体大小。把它放在你的页面可以解决问题，它对我有用。

Answer 4

控制大小的两个css规则是

jquery-ui.css的第424行

input.ui-button {
    padding: .4em 1em;
}

和jquery-ui.css的第59行

.ui-widget {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 1.1em;
}

调整填充和字体大小，直到它看起来像你想要的样子。

Answer 5

删除ui-widget类。

我认为模式是

<div class="ui-widget">
    <div class="ui-widget-header">
    </div>

    <div class="ui-widget-content">
    //your button could go here 
        <div class="ui-button">click me</div>
    </div>
</div>

Answer 6

我碰巧偶然发现了这一点，但尝试将DOCTYPE html添加到您的文档中

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

在打开html标记之前

。

Answer 7

@Tadeck我遇到了类似的问题，改变字体大小就行了:)谢谢！

另外，在我读这篇文章之前，我试图看看是否更改了内部内容的字体大小，但由于我在下面描述的原因，它没有。（所以不要做我做的！= P）

脚本调用jquery选项卡函数来制作选项卡

$(function() {
    $("#tabs").tabs();
});

标记脚本需要构建标签

<div id="content-wrapper">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-main">Dashboard</a></li>
      <li><a href="#tabs-stuff"> Other Stuff </a></li>
    </ul>
    <div id="tabs-main"> 
       <!-- where i put unformatted content, like headers and description paragraphs -->
       <div> formatted inner content here (for graphs/visual content/tables/etc) </div>
    </div>
    <div id="tabs-stuff"> 
       <!-- where i put unformatted content, like headers and description paragraphs -->
       <div> formatted inner content here (for graphs/visual content/tables/etc) </div>
    </div>
 </div>
</div>

结果是为每个标签内的div设置内联样式div不会改变标签的大小。我不得不改变从我推出的jQuery UI主题生成的css文件中的.ui-widget类的字体大小。实际上没有必要更改UI的样式表，因为您可以在下载自定义主题之前在jQuery主题滚轮的站点上设置字体大小。我忘记那样做了。我会把这一点归结为一个更令人讨厌的时刻。

[edit]这显然不适用于UI按钮，但类似的概念和问题适用

Answer 8

我遇到了这个问题..我的旋转器控件很难看，很大，并且是水平布置而不是垂直堆叠......

我要查看我的主html文件（实际上是一个剃刀MVC布局文件）并注意到我需要包含 /themes/base/jquery.ui.spinner.css

现在我的纺纱工人看起来很棒！

Answer 9

我尝试了所有其他答案，但似乎都没有正常工作。有些没有改变任何东西，有些产生了不良的副作用（比如缩小一切）。

这终于成功了：

.ui-widget
{
	font-size: 75%;
}

jQuery UI元素太大了

9 个答案: