2

http://jsfiddle.net/JkhkJ/

このjsfiddleは、私がこれまでに持っているものです。選択（ドロップダウンメニュー）を画像（その隣の1、2、3）と同じにしたいです。margin-top および bottom タグを使用してみましたが、機能していないようです。助けはありますか？粒子の方法は必要ありません。ドロップダウン メニューが隣の数字と同じである必要があるだけです。

4

2 に答える 2

5

使ってみて

position: relative; top: -22px;

それ以外の：

margin-top: -22px;

それはそれを行う必要があります。

ここで例を参照してください

于 2012-08-18T20:10:35.267 に答える
1

このフィドルを見ることができます： 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 も避けるようにしてください。

編集: レイアウトを少し壊し、テキストが浮かんでいますが、離れる必要があるため、これを非常に迅速に作成しました ;)

幸運を

于 2012-08-18T20:45:26.017 に答える