Question

我希望此代码类似于Google主页的底部。即使使用＆＃34; inline＆＃34;它仍然是垂直列出的。我想要每三个＆＃34;列表＆＃34;在屏幕的左侧和右侧水平相邻。

#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。浮动元素将占用所有孩子的宽度。通过将它们包裹在占宽度10％的元素中，它们没有足够的空间留在同一行上。

Answer 2

您可以在display: flex; DIV上使用.footer，设置如下

＆＃13;

.footer ul {
  list-style-type: none;
  padding: 0;
}
.footer li {
  display: inline-block;
}
.footer {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<footer>
  <div class="footer">
    <ul>
      <li>Advertising</li>
      <li>Business</li>
      <li>About</li>
    </ul>

    <ul>
      <li>Privacy</li>
      <li>Terms</li>
      <li>Settings</li>
    </ul>
  </div>
</footer>

＆＃13;

尝试使用按钮向左和向右浮动制作页脚

2 个答案: