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

Question

出于某种原因，我无法解决问题，当我将 ReCaptcha 片段添加到我的网站时，它会导致添加神秘的填充，从而阻止验证码 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

您应该在此处使用浮动 属性 来对齐项目。请在您的 css 中进行以下更改，看看它是否按预期工作。

.inputs>div>div {
    display: table-cell;
    padding: 0 0.5em 0 0.5em;
    text-align: left;
    float: left;
    width: 80%;
}
.inputs .captcha {
    box-sizing: border-box;
    padding-top: 0.5em;
    width: 18%;
    height: 100%;
    float: right;
    overflow: hidden;
}

希望对您有所帮助。

Answer 2

关键是将vertical-align:top;设置为"column"。

.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>