html - 页脚，让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 不同的联系信息并排创建一个页脚，至少有 50它们之间的间距 像素。我能够将它们与

 display: inline

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

Answer 1

一个使用 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>