我在订单中设置导航时遇到问题。我有 4 个 div 标签，它的顺序应该是左、右、右、左。所以我希望我的导航应该是这样的我的浮动权有问题。我试过这个.footer {}li { background-color: yellow; display: inline-block;}.one { background-color: orange;}.two {}.copy { background-color: blue;}.two, .three { float: right; background-color: aqua; clear: right;}<html> <body> <footer class="footer"> <div class="one" > <img src="https://via.placeholder.com/250x100" alt="footer" /> </div> <div class="two"> <ul> <li>privacy</li> <li>terms and conditions</li> <li>contact us</li> </ul> </div> <div class="three"> <ul> <li>instagram</li> <li>facebook</li> <li>twitter</li> </div> <div class="clear"></div> <div class="copy"> © 2020 mysite.com </div> </footer> </body></html>不知何故，浮动并没有将我的无序列表保持在顶部。我已经通过 stackoverflow 进行了搜索。但我找不到任何答案。如果我得到这份工作将会更有帮助。
1 回答
神不在的星期二
TA贡献1963条经验 获得超6个赞
如果不改变div结构，只需使用display:gird
.footer {
display: grid;
grid-template-columns: 1fr auto;
}
li {
background-color: yellow;
display: inline-block;
}
.one {
grid-area: 1 / 1 / 3 / 2;
background-color: orange;
}
.two {
grid-area: 1 / 2 / 2 / 3;
}
.three {
grid-area: 2 / 2 / 3 / 3;
}
.two, .three {
background-color: aqua;
text-align: right;
}
.copy {
grid-area: 3 / 1 / 4 / 2;
background-color: blue;
}
<html>
<body>
<footer class="footer">
<div class="one" >
<img src="https://via.placeholder.com/250x100" alt="footer" />
</div>
<div class="two">
<ul>
<li>privacy</li>
<li>terms and conditions</li>
<li>contact us</li>
</ul>
</div>
<div class="three">
<ul>
<li>instagram</li>
<li>facebook</li>
<li>twitter</li>
</div>
<div class="copy">
© 2020 mysite.com
</div>
</footer>
</body>
</html>
- 1 回答
- 0 关注
- 85 浏览
添加回答
举报
0/150
提交
取消