html - 每行两个输入，在选择标签空格之后

Question

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

如果它向右浮动(此屏幕截图中的第 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;
}

如果我删除“省”选择标签，一切都很好。对于省份列表，它总是在选择标签之后打破第二个“ float :右”。我的选择标签有问题吗？还是我的 CSS 有问题？

JSFiddles:第一张截图:http://jsfiddle.net/sB2W7/第二张截图:http://jsfiddle.net/4CfQ5/

Answer 1

我会使用 display: inline-block 而不是 float

演示 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;
}