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

Question

友好的网络用户，这个问题确实让我陷入困境。

HTML code：

       
#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 不同的联系信息并排至少50它们之间的间距像素。我能够将它们与

并排放置

 display: inline

代码，但我无法在它们之间留出空格，这里的错误是什么？

Answer 1

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

内联元素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类中添加margin-left或margin-right

Answer 3

使用flexbox的一个简单示例。 Flexbox可用于创建这样的“约束”，其中行为比大小更重要。

.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>