Question

http://jsfiddle.net/JkhkJ/

这个jsfiddle是我迄今为止所拥有的。我希望选择（下拉菜单）与图像（它们旁边的1,2,3）均匀。我尝试过使用margin-top和bottom标签，但它们似乎没有用。任何帮助？不需要任何粒子方式，只需要下拉菜单就可以得到它们旁边的数字。

Answer 1

尝试使用

position: relative; top: -22px;

而不是：

margin-top: -22px;

应该这样做。

参见示例here

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。

编辑：我打破了你的布局并且有一些文字漂浮在周围，但是因为我不得不离开所以我很快就这样做了;）

祝你好运

下拉菜单边距不起作用

2 个答案: