jquery - 当我使用自定义选择框时按钮位置尴尬

Question

我刚刚在网上发现了这个名为 fancySelect 的插件，并决定使用它，

基本上，我需要自定义选择框和按钮水平并排且垂直居中。我的 HTML 如下所示:

<section class="container">

            <div class="row">

                <div class="col-md-6">

                        <form class="select-branch" action="" method="POST">

                            <label for="branch-select">Hospital</label>

                            <select class="" id="branch-select" name="hospital" type="text">

                                <option value="Manipal Hospital Bangalore">Hosmat Hospital Bangalore</option>

                                <option value="Manipal Northside Hospital">test Hosmat Northside Hospital</option>

                            </select>

                            <button class="btn btn-success" type="submit">contact this location</button>

                        </form>

                </div>

            </div>    

    </section>

这是我尝试过的， FIDDLE HERE ，现在看看按钮是如何下降的，几乎就像我定位它一样，而不是给它一个从顶部的负偏移量，我没有做任何类似的事情，那么为什么会发生这种情况呢？以及如何使两者垂直居中？

我真的很想知道为什么会发生这种情况，有人可以在这里回答为什么问题吗？

谢谢。

亚历克斯-z。

Answer 1

由于您在 select 周围注入(inject) HTML，因此您得到了这种奇怪的定位。

将 CSS 中的 vertical-align: Bottom 放在 .fancy-select 上。

参见Fiddle .