html - 尝试制作一个带有左右浮动按钮的页脚

Question

我希望此代码类似于 Google 主页的底部。它仍然是垂直列出的，即使是“内联”。我希望每三个“列表”在屏幕的左侧和右侧水平相邻。

#HTML
<footer>
<div class="footer">
<ul style="width:10%; float:left;list-style-type:none;">
      <li>Advertising</li>
      <li>Business</li>
      <li>About</li>
   </ul>

   <ul style="width:10%; float:right;list-style-type:none;">
      <li>Privacy</li>
      <li>Terms</li>
      <li>Settings</li>
   </ul>
</div>
</footer>

#CSS

.footer li{
  display:inline;
}

Answer 1

您应该删除 ul 上的宽度。参见 this codepen . float 元素将占用所有子元素的宽度。通过将它们包裹在占宽度 10% 的元素中，它们没有足够的空间留在同一行。