html - 无法让 ReCaptcha 清晰地定位在另一个元素旁边

Question

出于某种原因，我无法解决问题，当我将 ReCaptcha 片段添加到我的网站时，它会导致添加神秘的填充，从而阻止 Captcha div 及其左侧的 div 正确对齐。如果我删除验证码并将其替换为图片或文本，则没有问题。

我希望布局如何工作:

验证码的外观:

.inputs {
  display: table;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 1em;
  padding: 0.5em 0.5em 1em 0.5em;
  margin-bottom: 1em;
  background-color: #e9e9e9;
}
.inputs>div {
  display: table-row;
}
.inputs>div>div {
  display: table-cell;
  padding: 0 0.5em 0 0.5em;
  text-align: left;
}
.inputs .captcha {
  box-sizing: border-box;
  padding-top: 0.5em;
  width: 164px;
  height: 100%;
  overflow: hidden;
}
.inputs span {
  font-size: 0.75em;
  font-weight: bold;
}
.inputs input {
  box-sizing: border-box;
  width: 100%;
  text-indent: 0.2em;
}
.inputs select {
  box-sizing: border-box;
  width: 100%;
}

<script src='https://www.google.com/recaptcha/api.js'></script>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      Hello, I'm a Captcha. I should be here, next to my friends 'Topic', and 'Subject'. But I like to be superior to them and float above!

    </div>
  </div>
</div>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      <div class="g-recaptcha" data-size="compact" data-sitekey="6LcU-SYTAAAAANenob4MJ24ZURnm8Q4OAmbuY3FW"></div>
    </div>
  </div>
</div>

非常感谢任何想法!

Answer 1

关键是设置vertical-align:top;到“专栏”。

.inputs {
  display: table;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 1em;
  padding: 0.5em 0.5em 1em 0.5em;
  margin-bottom: 1em;
  background-color: #e9e9e9;
}
.inputs>div {
  display: table-row;
}
.inputs>div>div {
  display: table-cell;
  padding: 0 0.5em 0 0.5em;
  text-align: left;
  vertical-align:top;
}
.inputs .captcha {
  box-sizing: border-box;
  padding-top: 0.5em;
  width: 164px;
  height: 100%;
  overflow: hidden;
}
.inputs span {
  font-size: 0.75em;
  font-weight: bold;
}
.inputs input {
  box-sizing: border-box;
  width: 100%;
  text-indent: 0.2em;
}
.inputs select {
  box-sizing: border-box;
  width: 100%;
}

<script src='https://www.google.com/recaptcha/api.js'></script>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      Hello, I'm a Captcha. I should be here, next to my friends 'Topic', and 'Subject'. But I like to be superior to them and float above!

    </div>
  </div>
</div>

<div class="inputs">
  <div>
    <div>
      <span>topic</span>
      <br>
      <select name="subject">
        <option value="general">General Enquiry</option>
        <option value="request-booking">Request a Booking</option>
        <option value="change-booking">Change a Booking</option>
        <option value="feedback">Give Feedback</option>
      </select>
      <br>
      <br>
      <span>subject</span>
      <br>
      <input type="text" name="subject" size="255">
      <br>
      <br>
    </div>
    <div class="captcha">
      <div class="g-recaptcha" data-size="compact" data-sitekey="6LcU-SYTAAAAANenob4MJ24ZURnm8Q4OAmbuY3FW"></div>
    </div>
  </div>
</div>