Question

我试图将这2个列表显示在header-top-bar div中，但看不到我在做什么错。现在，社交媒体正显示在第一个之下。

css应该将2个div放入包含的div中。第一个应该在它的左边。我要放在右边的第二个。

#header-top-bar {
  display: inline-block;
  max-width: 1178px;
  height: 22px;
  margin-bottom: 5px;
}

#contact-details-list {
  height: 22px;
  position: relative;
  bottom: 0px;
  left: 0;
  margin: 0;
  width: 801px;
}

ul#contact-details {
  position: absolute;
  bottom: 3px;
}

ul#contact-details li {
  display: inline;
  margin: 5px 5px 5px 0;
  padding-bottom: 5px;
  padding-left: 22px;
}

#social-media-links {
  height: 22px;
  position: relative;
  bottom: 0px;
  right: 0;
  margin: 0;
  width: 350px;
}

ul#social-media {
  position: absolute;
  bottom: 3px;
}

ul#social-media li {
  display: inline;
  margin: 5px 5px 5px 0;
  padding-bottom: 5px;
  padding-left: 22px;
  padding-right: 5px;
}

<div id="header-top-bar">
  <div id="contact-details-list">
    <ul id="contact-details">
      <li class="li-phone">555-555-5555</li>
      <li class="li-email">email address</li>
      <li class="li-hours">Hours by appointment</li>
      <li class="li-location">address</li>
    </ul>
  </div>
  <!-- contact-details-list -->
  <div id="social-media-links">
    <ul id="social-media">
      <li class="li-facebook">Facebook</li>
      <li class="li-youtube">Youtube</li>
      <li class="li-yelp">Yelp</li>
      <li class="li-google">Google+</li>
    </ul>
  </div>
  <!-- social-media-links -->
</div>
<!-- header-top-bar -->

Answer 1

尝试在display: inline-block;和#contact-details-list中添加#social-media-links。

所以它就像：

 #contact-details-list {
   display: inline-block;
   height: 22px;
   position: relative;
   bottom: 0px;
   left: 0;
   margin: 0;
   width: 801px;
 }

 #social-media-links {
   display: inline-block;
   height: 22px;
   position: relative;
   bottom: 0px;
   right: 0;
   margin: 0;
   width: 350px;
 }

Answer 2

您应该在＃header-top-bar中使用display：flex而不是inline-block，这是最佳做法。

#header-top-bar {
  display: flex;
  max-width: 1178px;
  height: 22px;
  margin-bottom: 5px;
}

https://codepen.io/anon/pen/yxrVRP

无法在一个内获得这2个div

2 个答案: