html - 有时 DIV 就像梯子一样

Question

我正在开发 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;
}

和my sources from GitHub如果缺少某些东西。

Answer 1

您的图片可能也需要 float 。

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