2

Chrome拡張機能を開発しています。

拡張機能のアイコンをクリックするとdiv、「はしご」のようになることがあります。

ここに画像の説明を入力

私はそれが次のようになりたい：

ここに画像の説明を入力

通貨フィールドが正しく配置されていることを確認するにはどうすればよいですか?

ここに私のマークアップがあります:

<div class="calc">
    <div class="in">
        <img id="cur-img-in" src="img/AMD.gif"/>
        <select name="currency-calc-cur" id="in-select">
            <option selected="selected" value="AMD">AMD</option>
            <option value="EUR">EUR</option>
            <option value="RUR">RUR</option>
            <option value="USD">USD</option>
        </select>
        <input type="text" id="in"/>
    </div>
    <img id='swap-cur' src="img/swap.png" alt="Swap"/>
    <div class="out">
        <img id="cur-img-out" src="img/USD.gif"/>
        <select name="currency-calc-cur" id="out-select">
            <option value="AMD">AMD</option>
            <option value="EUR">EUR</option>
            <option value="RUR">RUR</option>
            <option selected="selected" value="USD">USD</option>
        </select>
        <input type="text" id="out"/>
    </div>
</div>

そしてスタイル：

.calc {
   margin-top: 10px;
   margin-left: 20%;
   width: 60%;
}

.calc input[type="text"] {
   width: 100%;
}

.calc #bank-list {
    width: 100%;
}

.calc [name="currency-calc-cur"] {
    width: 78%;
}
.calc .in {
    width: 40%;
    position: relative;
    float: left;
}

.calc .out {
    width: 40%;
    position: relative;
    float: right;
}

.calc #swap-cur {
    margin: 17px 0 0 16px;
}

何か不足している場合は、GitHub からの私のソース。

4

1 に答える 1

2

画像もフローティングする必要がある可能性があります。

.calc #swap-cur {
    float: left;
    margin: 17px 0 0 16px;
}
于 2013-08-07T22:45:54.033 に答える