div有保证金,但不在检查员

时间:2017-10-03 10:20:07

标签: html css

我有一个<div>,其中包含两个<div>,但是当您在检查器中将鼠标悬停在其上时,第一个名为facePlus的<div>有一个边距,当您向下滚动到它说它没有它的表:

&#13;
&#13;
.facePlus {
  width: 50%;
  margin-right: 0%;
}
.twittIn {
  width: 50%;
  position: absolute;
  left: 50%;
}
.socialMedia {
  display: inline;
}
&#13;
<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

  

我怎么能把它们放在一起呢?

使用flexbox

&#13;
&#13;
.socialMedia {
  display: flex;
}

.socialMedia>div {
  flex: 1
}
&#13;
<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

两种方法......

您可以使用display属性将div放在一起......

&#13;
&#13;
.facePlus {
  width: 48%;
  display: inline-block;
}

.twittIn {
  width: 48%;
  display: inline-block;
}
&#13;
<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>
&#13;
&#13;
&#13;

或者您可以使用flexbox来了解有关here的更多信息:

&#13;
&#13;
.socialMedia {
  display: flex;
}

.facePlus,
.twittIn {
  flex: 1;
}
&#13;
<div class="socialMedia">
  <div class="facePlus">
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook<br>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google plus
  </div>
  <div class="twittIn">
    <i class="fa fa-twitter" aria-hidden="true"></i>Twitter<br>
    <i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin
  </div>
</div>
&#13;
&#13;
&#13;