Question

我正在使用WordPress

我有一张表格，我从头开始写作。标签和输入框在一行上，但它们之间有一个神秘的空间（它不是填充或边距）。

我知道这个间距可能是由于div之间的间距造成的。我编写了代码，以便div是彼此相邻的权利：

<div class="appointment-field-name">Name</div><div class="appointment-field-input">[text* your-name]</div><div><div class="appointment-field-name">Service</div><div class="appointment-field-input">[text* your-service]</div></div>

（注意：第二个＆＃34;约会 - 字段 - 名称＆＃34;和＆＃34;约会 - 字段 - 输入＆＃34;的额外div是这样的，它使它与上面的div对齐。不知道为什么）

但是，渲染时，两行都是分开的（参见下面的HTML）

这是html :(请注意：我知道这不是用HTML编写代码的最简洁方法。但是，我正在显示我的浏览器正在呈现的内容，而不是我在后端输入的内容。见上面的代码））

<div class="wpcf7" id="wpcf7-f29-o1" lang="en-US" dir="ltr">
    <div class="screen-reader-response"></div>
    <form name="" action="/#wpcf7-f29-o1" method="post" class="wpcf7-form" novalidate="novalidate">

    <div class="appointment-field-name">Name</div>
    <div class="appointment-field-input"><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></div>
    <div><div class="appointment-field-name">Service</div>
        <div class="appointment-field-input"><span class="wpcf7-form-control-wrap your-service"><input type="text" name="your-service" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span></div></div>

</form></div>

这是CSS

.wpcf7 {
    margin: 0;
    padding: 0;
}

.appointment-field-name {
    padding: 9px 0px;
    margin-bottom: 20px;
    text-align: center;
    color: #ffffff;
    background-color: #002d80;
    font-size: 142.86%;
    width: 240px;
    display: inline-block;
    vertical-align: top;
}

.appointment-field-input {
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.wpcf7-text {
    padding: 11px 20px;
    background-color: #D5DFF2;
    font-size: 120%;
    width: 100%;
}

input { border: 0; }

span.wpcf7-form-control-wrap {
position: relative;
}

这是小提琴：http://jsfiddle.net/4nkydy76/2/

如何删除此空格以使输入框与标签齐平？

感谢您的时间！

注意：要解决重复的问题问题：正如我在帖子中提到的，我知道间距是由于代码中div之间的空格（如引用的重复问题中的答案）。我的问题是WordPress以不同的方式呈现我的代码，即使我删除了div之间的任何空格（参见本文中的第一段代码）。谢谢。

标签和输入文本框之间的半神秘空间

0 个答案: