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

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>

我正在尝试使导航栏进入下一行。我希望底部导航像两行文本。对不起，我是新来编写html css和Im的人，而我只有13岁，而Im正在努力改进。我愿意为您提供任何帮助和支持！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>