html - 如何将我的列表项放到下一个打开的行中？

Question

所以我的代码是这样的:

.bottombarelementL {
  display: inline-block;
  margin-right: 10px;
  transition-property: all;
  transition-duration: 1s;
  float: left;
  margin-left: 20%;
}

.bottombarelementL:hover {
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
}

.bottombarelementR {
  display: inline-block;
  margin-right: 10px;
  transition-property: all;
  transition-duration: 1s;
  float: right;
  margin-right: 20%;
}

.bottombarelementR:hover {
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
}

<div class="bottomnavleft">
  <ul class="bottomleft">
    <li class="bottombarelementL">About Us</li>
    <li class="bottombarelementL">Affiliates</li>
  </ul>
</div>
<div class="bottomnavright">
  <ul class="bottomright">
    <li class="bottombarelementR">TOS</li>
  </ul>
</div>

我正在尝试让导航栏转到下一行。我希望底部导航栏像 2 行文本一样。抱歉，我是 html css 编码的新手，我只有 13 岁，我正在努力改进。我愿意接受您能给我的任何帮助和支持! I want the bottom texts to be in 2 columns

Answer 1

您需要使用 flex查看，

您需要将 display: flex 添加到父级。并为子项添加 flex ratio。

示例

.nav {
  display: flex;
  flex-direction: row;
}

.left, .right {
  flex: 1;
}

<div class='nav'>
  <div class='left'>
    <ul>
      <li>About Us</li>
      <li>Affiliates</li>
    </ul>
  </div>
  <div class='right'>
    <ul>
      <li>TOS</li>
    </ul>
  </div>
</div>