Od jakiegoś czasu zmagałem się z tym (naprawdę nie byłam doświadczony z jQuery ui).
Próbuję zaimplementować UI JQuery, który ma selectmenu obok niektórych zwykłych Przyciski. Z jakiegoś powodu nie mogę zrozumieć, SelectMenu jest błędnie dopasowany; Jest wyższy na stronie niż przyciski.
Oto jak to wygląda:
Nie jestem pewien, czy jest to błąd, czy nie, na pewno wygląda bardzo źle. Od dłuższego czasu walczę, ale nie byłem w stanie tego zrozumieć.
Markup jest naprawdę bardzo podstawowy, więc nie sądzę, że to bardzo pomocne, aby go włączyć tutaj., Ale to wszystko tutaj: http://jsbin.com/afixij/10/edit?html,cs ajs,Output. Rozszerzaj wyjście, aby zobaczyć wszystkie trzy elementy (SelectMenu i przyciski foo i bar) na tej samej linii.
4 odpowiedzi
Możesz po prostu zastosować vertical-align:middle do rozwijanej, która składa się z przęseł, aby przyciski dostosowane prawidłowo z rozwijaną.
#speed-button{
vertical-align : middle;
}
Wygląda na to, że nie ma opcji, aby zapewnić niestandardową nazwę klasy do wyboru widgetu menu (jest źle, jeśli tak jest), ponieważ stosowanie reguły do klasy byłoby znacznie lepiej. Możesz tak dobrze zrobić: -
Zastosuj nazwę klasy dla select
I w CSS zapewnia ogólną regułę dla dowolnego .menu-button s
.menu-button + .ui-selectmenu-button{
vertical-align : middle;
}
Właściwie może być łatwiej, aby rzeczywiste przyciski (nie menu) przy użyciu
<button style="vertical-align: top"></button>
Można go zauważyć, a stworzenie niestandardowej klasy nie jest wymagane.
Rozwiązanie, które zastosowane było umieszczenie treści, które chciałem być pionowo wyrównany w wpisie display: flex. Na przykład:
<div style="display: flex; align-items: center;">
... other elements here
</div>
Aby uzyskać więcej informacji na temat tego typu wyświetlacza, zobacz Ta doskonała dyskusja:
http://css-tricks.com/snipts/css/a-guide-to-flexbox/
Aby rozwinąć zaznaczoną odpowiedź, istnieje sposób na uzyskanie obiektu jQuery SelectMenu tworzy. Upewnij się, że zainicjujesz SelectMenu najpierw lub nie zadziała.
$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");
CSS:
.fixAnnoyingSelectAlignmentClass
{
vertical-align: middle;
}