स्टाइलिंग Jquery-UI टैब

Question

मैं jquery टैब के साथ खेल रहा हूं जिस तरह से मैं फिट बैठता हूं उन्हें स्टाइल करने का प्रयास कर रहा हूं। मैंने टैब को कम करने का प्रयास किया और यूआई स्टाइलशीट में height:45px; जोड़ा जैसा कि नीचे देखा गया है।

.ui-tabs-vertical .ui-tabs-nav li { 
    clear: left; 
    height:45px; 
    width: 100%; 
    border-bottom-width: 1px !important; 
    border-right-width: 0 !important; 
    margin: 0 -1px .2em 0; 
} 

फिर भी, सभी टैबों को कम करने के बजाय इसे एक (अंतिम) अपरिवर्तित रखा गया। इसे यहां देखा जा सकता है, टैब को ट्रैश JS-FIDDLE demo लेबल किया गया है। मैं समझना चाहता हूं कि क्या हो रहा है और मैं इसे कैसे ठीक कर सकता हूं। इसके अलावा, किसी भी अन्य कोडिंग युक्तियों की सराहना की जाएगी।

Answer 1

में फ़ॉन्ट आकार shirink li अंदर एंकर टैग li से अधिक है। यदि आप उस ऊंचाई को प्रतिबंधित करते हैं तो यह काम कर सकता है।

.ui-tabs-vertical .ui-tabs-nav li a { height: 30px; } 

See updated fiddle

मैं सिर्फ क्रोम डेवलपर उपकरण है कि अपने टैब अतिव्यापी हैं के साथ देखा। केवल अंतिम व्यक्ति ओवरलैप नहीं होता है और इसलिए दूसरों की तुलना में लंबा दिखता है।

Answer 2

पहले विजेट

.ui-widget{font-family:Arial,sans-serif;font-size:medium} 

Answer 3

इस ऊंचाई के साथ खेलना मुद्दे का समाधान होगा:

.accordion li> {ऊंचाई: 30px महत्वपूर्ण; }