页脚，让2个联系段落在同一行，两个联系信息之间有间距

Question

友好的网络用户，这个问题真的让我卡住了。

HTML代码：

       
#footer {
   position: absolute;
   left: 500px;
   bottom: 0px;
    }
    
  .contact_footer{
   float: left;
   display: inline;
    }

<footer>
 
  <div id="footer">
   <div class="contact_footer">
   <h3>Contact</h3>
   <address>
   **Address information**
   </address>
   </div>
 
  <div class="contact_footer">
   <h3>Factory</h3>
   <address> 
   2nd Address information
   </address>
  </div>
  </div>
 </footer>

如您所见，我正在尝试创建一个页脚，其中包含 2 条不同的联系信息 side并排，它们之间至少有 50 个间距像素。我能够将它们与

并排放置

 display: inline

代码，但我无法在它们之间创建 space，这里有什么错误？

Answer 1

我会使用 flexbox 并定义 space 介于两者之间。为 .contact_footer 设置左边距将保证元素之间的最小值 space。

内联元素的填充和边距 can sometimes seem a bit unpredictable。或者，您可以将显示设置为 inline-block。避免浮动将使您的所有元素保持在正常的文档流中。

#footer {
  position: absolute;
  left: 500px;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
}

.contact_footer {
  margin-left: 50px;
}

<footer>
  <div id="footer">
    <div class="contact_footer">
      <h3>Contact</h3>
      <address>
   **Address information**
   </address>
    </div>

    <div class="contact_footer">
      <h3>Factory</h3>
      <address> 
   2nd Address information
   </address>
    </div>
  </div>
</footer>

Answer 2

尝试在 contact_footer class

中添加 margin-left 或 margin-right

Answer 3

使用 flexbox 的简单示例。 Flexbox 可用于创建这样的 "constraints"，其中行为比大小更重要。

.footer {
  display: flex;
  justify-content: space-between;
}

<footer class="footer">
  <ul class="footer__list">
    <li class="footer__list-item">List 1</li>
    <li class="footer__list-item">List 1</li>
    <li class="footer__list-item">List 1</li>
    <li class="footer__list-item">List 1</li>
    <li class="footer__list-item">List 1</li>
  </ul>
  
  <ul class="footer__list">
    <li class="footer__list-item">List 2</li>
    <li class="footer__list-item">List 2</li>
    <li class="footer__list-item">List 2</li>
    <li class="footer__list-item">List 2</li>
    <li class="footer__list-item">List 2</li>
  </ul>
</footer>

页脚，让2个联系段落在同一行，两个联系信息之间有间距

Footer, make 2 contact paragraphs same line, have spacing between the two contact info

html

css

spacing