Question

我在使用display：inline-block on 2 elements时面临一个奇怪的问题。

也许我错过了一些东西，但为什么按钮上方有一些空间？

代码在这里：

＆＃13;

.contact-validation {
  text-align: right;
}

.contact-captcha {
  width: 320px;
  height: 90px;
  background-color: #879;
  display: inline-block;
}

.contact-submit {
  display: inline-block;
}

.contact-button {
  margin-top: 0;
  height: 90px;
  width: 300px;
  font-size: 35px;
  background-color: #000;
  color: #fff;
  border: 0;
}

＆＃13;

<div class="contact-validation">
  <div class="contact-captcha"></div>
  <div class="contact-submit">
    <button type="submit" class="contact-button">Get in Touch</button>
  </div>
</div>

＆＃13;

问题在这里：http://jsbin.com/jowosejahe/edit?html,css,output

Answer 1

只需应用Vertical-align：

.contact-validation {  
  text-align: right;
}

.contact-captcha {
  width: 35%;
  height: 90px;
  background-color:#879;
  display: inline-block;
}

.contact-submit {
  display: inline-block;
  vertical-align: top;
}

.contact-button {
  margin-top: 0;
  height: 90px;
  width: 300px;
  font-size: 35px;
  background-color: #000;
  color: #fff;
  border:0;
}

<div class="contact-validation">
    <div class="contact-captcha"></div>
    <div class="contact-submit">
        <button type="submit" class="contact-button">Get in Touch</button>
    </div>
</div>

Answer 2

我已经更改了同样的css并删除了你可以替换两个类

.contact-validation {
    text-align: right;
    display: inline-block;
    float: right; 
 }

.contact-captcha {
    width: 320px;
    height: 90px;
    background-color: #879;
    /* display: inline-block; */
}

Answer 3

我在计算机上尝试了你的代码，我可以看到两个div之间的空格有些奇怪：

<div class="contact-captcha"></div>
<div class="contact-submit">
  <button type="submit" class="contact-button">Get in Touch</button>
</div>

如果删除div之间的换行符：

<div class="contact-captcha"></div><div class="contact-submit">
  <button type="submit" class="contact-button">Get in Touch</button>
</div>

它们之间的空间消失了。我认为是因为内联块的属性，它将每个字符作为要写入的代码。如果你像这样结束你的第一个div：

<div class="contact-captcha"/>
<div class="contact-submit">
  <button type="submit" class="contact-button">Get in Touch</button>
</div>

它也有所不同。也许你想要这样做。希望它有所帮助。

Answer 4

将这两个元素更改为包含float：right。

.contact-captcha {
  width: 320px;
  height: 90px;
  background-color:#879;
  display: inline-block;
  float:right;
}

.contact-submit {
  display: inline-block;
  float:right;
}

使用display：inline-block在第二个div顶部的空格

4 个答案: