Question

我正在尝试减少jquery ui标签的高度，但格式不好。 Here是代码的链接。任何人都可以让我知道如何做到这一点？

Answer 1

.ui-widget-header {
    background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) repeat-x !important;
    color: #222222;
    font-weight: bold;
    height:13px
}

.ui-widget-header ul {
    height:11px;   
}

.ui-tabs .ui-tabs-nav li {
    height:11px;
    font-size:10px;

}

.ui-tabs .ui-tabs-nav li a {
    position:relative;
    top:-6px  
}

Answer 2

您可以添加javascript代码

$("#tabs").css("height",$("body").height());

Answer 3

不确定要完成的是什么，因为当您缩小height时，标签看起来更加偏离。

但是，如果我添加到height的{{1}}和.ui-widget-header这一切都适合。

http://jsfiddle.net/jasongennaro/rRpNz/5/

Answer 4

你的问题很模糊，但我设法四处游戏以获得更好的视觉效果here。您需要使用.ui-tabs .ui-tabs-nav li a和.ui-tabs-nav

Answer 5

从jquery-ui-1.11.4开始，确定标签本身的大小主要取决于字体大小和填充属性。

以下显示了jQuery theme roller网站下载的分发版中的jquery-ui.structure.css中的相关选择器及其默认值。

原始相关的CSS选择器：

/* jquery-ui.structure.css */

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

以下补充定义（我在<style></style>标记中添加到我的HTML文件中，会覆盖默认值，通过将填充为0并减少来减少标签大小（可能太多）默认的字体大小。虽然清晰可辨，但它使标签太小，不符合我的个人喜好。我更喜欢上面的默认值和之间的东西：

添加/覆盖相关属性：

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 0 0;
    font-size: smaller;
}

注意：我个人喜欢保留随实用程序或小部件提供的CSS样式表，只是通过将更改添加到我的HTML文件或其关联的样式表之一来扩展/覆盖CSS。

Answer 6

添加以下CSS规则以从标签文本中删除顶部和底部填充。

.ui-tabs .ui-tabs-nav li a {
    padding: 0 1em;
}

jsFiddle

减少jquery ui标签的高度

6 个答案: