jquery uiタブの高さを減らす

Question

jquery UIの高さを小さくしようとしていますが、フォーマットが適切ではありません。 Hereはコードへのリンクです。誰でも私にこれをどうやってできるのか教えてもらえますか？

Answer 1

デモで遊んでする必要があります：http://jsfiddle.net/v8APf/

.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

タブのテキストから上下のパディングを削除するには、次のCSSルールを追加します。それはあなたがheightを削減する場合、タブがオフ一層見えますので、あなたは、達成したいです何

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

jsFiddle

Answer 3

わかりません。

しかし、私が.ui-widget-headerと.ui-tabs .ui-tabs-nav liのheightに追加すると、それはすべて適合します。

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のとおり、タブ自身のサイズをJavaScriptコード

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

Answer 6

を追加することができます主にフォントサイズとパディング属性によって決定されます（ ）。

関連するセレクタとそのデフォルト値をjquery-ui.structure.cssに表示し、jQuery theme rollerサイトからダウンロードしたディストリビューションで取得します。

オリジナルの関連する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ファイルまたは関連するスタイルシートの1つに追加してCSSをオーバーライドします。