html - 下拉菜单边距底部不起作用

Question

http://jsfiddle.net/JkhkJ/

这个 jsfiddle 是我到目前为止所拥有的。我希望选择（下拉菜单）与图像（旁边的 1、2、3）保持一致。我曾尝试使用边距顶部和底部标签，但它们似乎不起作用。有什么帮助吗？不需要任何粒子方式，只需要下拉菜单与它们旁边的数字相同。

Answer 1

尝试使用

position: relative; top: -22px;

代替：

margin-top: -22px;

那应该这样做。

在此处查看示例

Answer 2

你可以看看这个小提琴：http: //jsfiddle.net/3xcbw/1/

.select_step_wrapper {
    height: 43px;
    width: 245px;
    display: inline-block;
}

.select_step {
    margin-top: 10px;
    margin-left: 50px;
    height: 43px;
    width: 200px;
}

#states_wrapper {
    background: url(http://unavit.com/images/oneLabel.png) no-repeat left center;
}

#schools_wrapper {
    background: url(http://unavit.com/images/twoLabel.png) no-repeat left center;
}

#buildings_wrapper {
    background: url(http://unavit.com/images/threeLabel.png) no-repeat left center;
}

它可能不是最好的 CSS 代码或实践，但它工作正常。

我已经向您的选择框和一些包装 div 添加了类，因此如果您想再次执行此操作而不重写代码会更容易。

<div id="states_wrapper" class="select_step_wrapper">
    <select id="states" class="select_step">
        <option>Select A State</option>
    </select>
</div>

<div id="schools_wrapper" class="select_step_wrapper">
    <select id="schools" class="select_step"></select>
</div>

<div id="buildings_wrapper" class="select_step_wrapper">
    <select id="buildings" class="select_step"></select>
</div>

最后一点，您应该考虑避免使用表格作为菜单并使用带有一些样式的 ul li 来代替，同时尽量避免使用内联 css。

编辑：我打破了你的布局，周围有一些文字，但我做得很快，因为我必须离开；）

祝你好运