Stylizowanie kart Jquery-ui

Question

Gram z zakładkami jquery, próbując nadać im styl, jaki uznaję za stosowny. Podjęto próbę zmniejszenia zakładek i dodano height:45px; do arkusza stylów interfejsu użytkownika, jak pokazano poniżej.

.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; 
} 

Jednak zamiast obcinania wszystkich zakładek zachował jeden (ostatni) bez zmian. Widać tutaj kartę o nazwie Trash JS-FIDDLE demo. Chciałbym zrozumieć, co się dzieje i jak mogę to naprawić. Również wszelkie inne wskazówki dotyczące kodowania byłyby bardzo mile widziane.

Answer 1

Znacznik zakotwiczenia wewnątrz li jest większa niż li. Jeśli ograniczysz tę wysokość, może ona działać.

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

See updated fiddle

Właśnie zauważyłem z narzędzi programistycznych chrom, że karty są nakładających się. Tylko ostatnia nie pokrywa się i dlatego wygląda na wyższą od pozostałych.

Answer 2

pierwsze Shirink rozmiar czcionki w widget

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

Answer 3

Bawiąc się z tej wysokości będzie rozwiązać problem:

.accordion li> {height:! 30px ważne; }