Question

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

＆＃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;

Answer 1

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

使用flexbox

＆＃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;

Answer 2

两种方法......

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

＆＃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;

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

＆＃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;

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

2 个答案: