所以我的代码是这样:
.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
您需要使用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>