Question

我正在使用Themify构建器，我在构建器的文本块中创建了一个小表单。

田野上方有无意识的差距。您可以实时查看here。

HTML：

<form action="contact_info.php" method="get">
    Loan Calculator
        <select class="form-inline">
            <option value="1000">$1,000 Loan</option>
            <option value="2000">$2,000 Loan</option>
            <option value="5000">$5,000 Loan</option>
            <option value="7500">$7,500 Loan</option>
            <option value="10000">$10,000 Loan</option>
            <option value="12000">$12,000 Loan</option>
            <option value="15000">$15,000 Loan</option>
            <option value="17000">$17,000 Loan</option>
            <option value="20000">$20,000 Loan</option>
            <option value="25000" selected="selected">$25,000 Loan</option>
            <option value="30000">$30,000 Loan</option>
            <option value="40000">$40,000 Loan</option>
            <option value="50000">$50,000 Loan</option>
            <option value="60000">$60,000 Loan</option>
            <option value="70000">$70,000 Loan</option>
            <option value="80000">$80,000 Loan</option>
            <option value="90000">$90,000 Loan</option>
            <option value="100000">$100,000 Loan</option>
        </select>
        <select class="form-inline">
            <option value="1">1 Year</option>
            <option value="2">2 Years</option>
            <option value="3">3 Years</option>
            <option value="4">4 Years</option>
            <option value="5" selected="selected">5 Years</option>
            <option value="6">6 Years</option>
            <option value="7">7 Years</option>
        </select>
        <input type="submit" value="Calculate" class="form-inline">
</form>

CSS：

.form-inline {
    display: inline-block;
    margin: 0px;
    float: left;
}

Answer 1

您好请删除代码中<br>之间的<select>代码，您的表单字段将会显示在您想要的位置。 <br>标记强行打破这条线，这就是看到这种差距的原因。

Answer 2

在您的演示页面上，表单中的每个元素后面都有<br>标记，请将其删除。

Answer 3

我弄明白了这个问题。如果表单标记之间有空格，Wordpress会自动添加<br>标记。我删除了每个标签之间的所有空格，问题解决了。

为什么我的表单字段没有水平对齐？

3 个答案: