我正在尝试将copyright
我的元素ul
向右对齐。该列表配置为display: inline-flex
。奇怪的是,最后一项似乎根本没有动。
nav {
text-align: center;
font-family: Helvetica;
opacity: 0.8;
background: #222222;
position: absolute;
bottom: 0;
width: 100%;
}
nav li {
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
font-size: 1em;
margin-right: .625em;
}
#copyright {
margin-left: auto;
}
<footer>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="safety.html">Safety</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="contact.html">Contact</a></li>
<li id="copyright">© 2020 Copyright LLC</li>
</ul>
</nav>
</footer>
我的理解是margin-left: auto
应该将最后一个列表元素推到右侧,以实现我的目标。margin-left: auto
尽管无法再找到该链接进行确认,但我读到的内容在嵌入式Flexbox上不起作用。谁能验证?
显示弯曲会影响应用于它的元素的内部/子元素。您将必须在ul上放置一个显示flex,使用flex自动定位只有flex的子项。强文本
nav {
text-align: center;
font-family: Helvetica;
opacity: 0.8;
background: #222222;
position: absolute;
bottom: 0;
width: 100%;
}
nav ul {
display: flex;
}
nav li {
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
font-size: 1em;
margin-right: .625em;
}
#copyright {
margin-left: auto;
}
<footer>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="safety.html">Safety</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="contact.html">Contact</a></li>
<li id="copyright">© 2020 Copyright LLC</li>
</ul>
</nav>
</footer>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句