html - 如何将列表项放在下一个打开的行上？(How can I put my list item onto the next open line?)

Question

So my code is this:

(所以我的代码是这样的：)

 .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> 

I am trying to get the navbar to go onto the next line.

(我正在尝试使导航栏转到下一行。)

I want the bottom nav to be like 2 rows of text.

(我希望底部导航像两行文本。)

Sorry I am new to coding html css and Im only 13 and Im trying to improve.

(对不起，我是新来编写html css和Im的人，而我只有13岁，而Im正在努力改进。)

I am open to any help and support you can give me!

(我愿意为您提供任何帮助和支持！)

I want the bottom texts to be in 2 columns

(我希望底部文本在2列中)

  ask by RoyBoi BTW translate from so

Answer 1

You need use flex view,

(您需要使用弹性视图，)

You need to add display: flex to the parent.

(您需要将display: flex添加到父级。)

And add flex ratio to the children.

(并增加孩子的flex ratio 。)

Example

(例)

 .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>