选择标记空格后，每行两个输入

Question

我有一个基本形式，我试图每行获得两个输入。除非'省'选择标记向右浮动，否则会打破间距。如果它是第5个，就像我发布的代码一样，邮政编码和传真之间就会出现空白点。标签顺序甚至保持正确（电话 - ＆gt;传真 - ＆gt;电子邮件 - ＆gt;网络）。

如果它向右浮动（在此屏幕截图中排名第6），那么一切都很好。

我的表格：

<form id="form" action="submit.php" method="post">
    <fieldset>
        <p>
            <label for="first_name">* First Name:</label>
            <input type="text" name="first_name" id="first_name" required />
        </p>
        <p>
            <label for="last_name">* Last Name:</label>
            <input type="text" name="last_name" id="last_name" required />
        </p>
        <p>
            <label for="address">Company Address:</label>
            <input type="text" name="address" id="address" />
        </p>
        <p>
            <label for="city">City:</label>
            <input type="text" name="city" id="city" />
        </p>
        <p>
            <label for="province">Province:</label>
            <select name="province" id="province">
                <option value="">Select location</option>
                <option value="AB">Alberta</option>
                <option value="BC">British Columbia</option>
                <option value="MB">Manitoba</option>
                <option value="NB">New Brunswick</option>
                <option value="NL">Newfoundland and Labrador</option>
                <option value="NS">Nova Scotia</option>
                <option value="NT">Northwest Territories</option>
                <option value="NT">Nunavut</option>
                <option value="ON">Ontario</option>
                <option value="PE">Prince Edward Island</option>
                <option value="QC">Quebec</option>
                <option value="SK">Saskatchewan</option>
                <option value="YT">Yukon</option>
                <option value="US">(US State)</option>
            </select>
        </p>
        <p>
            <label for="postal_code">Postal Code:</label>
            <input type="text" name="postal_code" id="postal_code" />
        </p>
        <p>
            <label for="phone">* Phone:</label>
            <input type="tel" name="phone" id="phone" required />
        </p>
        <p>
            <label for="fax">Fax:</label>
            <input type="tel" name="fax" id="fax" />
        </p>
        <p>
            <label for="email">E-Mail Address:</label>
            <input type="email" name="email" id="email" />
        </p>
        <p>
            <label for="web_address">Website Address:</label>
            <input type="text" name="web_address" id="web_address" />
        </p>
    </fieldset>
</form>

我的CSS：

fieldset p {
    display: inline-block;
    width: 49%;
}

fieldset p:nth-of-type(even){
    float:right;
}

如果我删除'省'选择标记，一切空格都很好。使用省列表，它总是在select标签之后打破第二个'float：right'。我的选择标签有问题吗？或者它与我的CSS有关吗？

JSFiddles： 第一个截图：http://jsfiddle.net/sB2W7/ 第二个屏幕截图：http://jsfiddle.net/4CfQ5/

Answer 1

我会使用display: inline-block代替float

DEMO http://jsfiddle.net/LLJ6Z/2/

p {
    display: inline-block;
    width: 45%
}
label {
    display: inline-block;
    width: 130px;
    display
}
input, select {
    display: inline-block;
    width: 100px;
}