Html/Css Top Bar：将两个内容对齐在top bar的不同位置

Question

我正在尝试创建具有以下结构的顶栏

                               Tel:4949494949                    social media icons

在中间我试图获得联系信息，几乎在右边是我的社交媒体图标。

我无法正确放置社交媒体。 CSS 总是把它们放在联系信息旁边的中间。
怎么了？

#tpbr_box .a {
  width: 10%;
  height: 20%;
  text-align: center;
  display: inline;
  font-size: 20px!important;
}

#tpbr_box .social2 {
  float: right;
}

#tpbr_box {
  font-size: 20px!important;
}

<div class="info">
  <i class="fa fa-home"></i> |
  <a style="color:white;" href="tel:54543">354353535</a>

</div>
<div class="social2">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-youtube"></a>
</div>

Answer 1

我认为问题出在您在链接上放置了 text-align: center;。将 text-align: center; 放在标签 a 上，页面上显示的所有链接都将转到中间。

Answer 2

根据您的要求，信息在中间，社交在右边！

试试这个：

<!-- Html code --> 
  <div class="top_nav">
    <div class="info">
     <i class="fa fa-home"></i> |
     <a style="color:whites;" href="tel:54543">354353535</a>
    </div>
     <div class="social2">
         <a href="#" class="fa fa-facebook"></a>
         <a href="#" class="fa fa-twitter"></a>
         <a href="#" class="fa fa-instagram"></a>
         <a href="#" class="fa fa-youtube"></a>
     </div>
 </div>

这里是 CSS 样式：

 #tpbr_box .a {
      width: 10%;
      height: 20%;
      text-align: center;
      display: inline;
      font-size: 20px!important;
  }
  #tpbr_box .social2{
      float:right;
 }

  #tpbr_box  {
          font-size: 20px!important;
  }
 .top_nav{
        display: flex;
  }
  .top_nav    .social2  {
    position: absolute;
    right: 14px;
  }
  .info{
        margin: 0 auto;
  }

确保使用“top_nav”class 添加父级 div 以控制样式。

Answer 3

我换掉了 div classes 因为当你使用一个新的时，它会在一个新的行中写入它。我通过使用 a-class 而不是 div 来解决这个问题，仍然给每个人一个 class。我使用带百分比的 width 和 margin-left 的原因是无论长度如何，html 都会调整（例如，你调整 window 的大小，它会随之调整大小）。

.topbar {
  width: 100%
}

.info {
  margin-left: 45%
}

.social2 {
  margin-left: 55%
}

<div class="info">
  <a class='center'>
   <i class="fa fa-home"></i>
   <a href="tel:54543">354353535</a>
  </a>
  <a class='social2'>
    <a href="#" class="fa fa-facebook">f</a>
    <a href="#" class="fa fa-twitter">t</a>
    <a href="#" class="fa fa-instagram">i</a>
    <a href="#" class="fa fa-youtube">y</a>
  </a>
</div>

Html/Css Top Bar：将两个内容对齐在top bar的不同位置

Html/Css Top Bar: Align two contents in diffrent positions of top bar

html

css

navbar