调整窗口大小时文本对齐过渡

Question

我有这个移动导航(按完整页面并调整窗口大小以查看导航打开时的效果(：

let responsiveNav = document.getElementById("responsiveNav");
let responsiveNavDarkBackground = document.getElementById("responsiveNavDarkBackground");
function openResponsiveNav() {
responsiveNav.style.right = "0";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0.5)";
responsiveNavDarkBackground.style.zIndex = "9998";
}
function closeResponsiveNav() {
responsiveNav.style.right = "-100%";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0)";
responsiveNavDarkBackground.style.zIndex = "-1";
}
window.onclick = function(event) {
if (event.target === responsiveNavDarkBackground) {
closeResponsiveNav();
}
}

* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.bi-list {
font-size: 50px;
float: right;
cursor: pointer;
}
/* Navigation */

/* Mobile Version */
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -100%;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background: #F5C152;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
text-align: center;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}

/* Desktop Version */
@media screen and (min-width: 600px){
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -600px;
top: 0;
z-index: 9999;
height: 100%;
width: 400px;
background: #F5C152;
box-shadow: 0 0 15px 10px #5d5d5d;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
text-align: right;
transition: all 0.3s;
}
#responsiveNavul:hover > li {
width: 0;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<i class="bi bi-list" onclick="openResponsiveNav();"></i>
<div id="responsiveNavDarkBackground">
<div id="responsiveNav">
<div id="responsiveNavHeader">
<h1>Menu</h1>
<i class="bi bi-x-lg" id="closeResponsiveNav" onclick="closeResponsiveNav();"></i>
</div>
<ul>
<li class="responsiveNavItem">Home</li>
<li class="responsiveNavItem">Menu</li>
<li class="responsiveNavItem">Our Story</li>
<li class="responsiveNavItem">Contact Us</li>
</ul>
</div>
</div>

一切都很完美，但有一个问题，那就是文本对齐。如果导航在大屏幕上并且在右侧，则它将获得text-align: right;属性。如果屏幕较小并且覆盖了整个屏幕，则会得到text-align: center;。如何在调整屏幕大小时使文本对齐方式发生转换？

在这个问题因为口是心非的原因被标记之前，我已经看到了这个问题：是否可以只使用CSS3转换文本对齐，但这对没有帮助

Answer 1

链接的答案是您所需要的，但添加了：direction: rtl;，因此文本向左溢出，并用span包装元素，以避免干扰悬停效果。

let responsiveNav = document.getElementById("responsiveNav");
let responsiveNavDarkBackground = document.getElementById("responsiveNavDarkBackground");
function openResponsiveNav() {
responsiveNav.style.right = "0";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0.5)";
responsiveNavDarkBackground.style.zIndex = "9998";
}
function closeResponsiveNav() {
responsiveNav.style.right = "-100%";
responsiveNavDarkBackground.style.background = "rgba(0,0,0,0)";
responsiveNavDarkBackground.style.zIndex = "-1";
}
window.onclick = function(event) {
if (event.target === responsiveNavDarkBackground) {
closeResponsiveNav();
}
}

* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.bi-list {
font-size: 50px;
float: right;
cursor: pointer;
}
/* Navigation */
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -100%;
top: 0;
z-index: 9999;
height: 100%;
width: 100%;
background: #F5C152;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
text-align: right;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}
.responsiveNavItem > span{
display: inline-block;
text-align: center;
white-space: nowrap;
width: 100%;
overflow: visible;
direction: rtl;
transition: all 1.5s ease;
}
@media screen and (min-width: 600px){
.responsiveNavItem > span{
width: 0;
}
#responsiveNavDarkBackground {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0);
z-index: -1;
transition: all 0.5s;
}
#responsiveNav {
position: fixed;
right: -600px;
top: 0;
z-index: 9999;
height: 100%;
width: 400px;
background: #F5C152;
box-shadow: 0 0 15px 10px #5d5d5d;
transition: all 0.5s;
}
#responsiveNavHeader {
background: #fff;
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
#responsiveNav #responsiveNavHeader img {
height: 35px;
}
#responsiveNavHeader #closeResponsiveNav {
font-size: 25px;
cursor: pointer;
}
#responsiveNav ul {
list-style: none;
/*text-align: right;*/
transition: all 0.3s;
}
#responsiveNavul:hover > li {
width: 0;
}
#responsiveNav ul li {
font-size: 1.2em;
padding: 1em;
transition: all 0.1s;
color: #fff;
}
#responsiveNav ul li:hover {
background: #c69943;
cursor: pointer;
}
#responsiveNav ul li:active {
background: #a78139;
cursor: pointer;
}
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<i class="bi bi-list" onclick="openResponsiveNav();"></i>
<div id="responsiveNavDarkBackground">
<div id="responsiveNav">
<div id="responsiveNavHeader">
<h1>Menu</h1>
<i class="bi bi-x-lg" id="closeResponsiveNav" onclick="closeResponsiveNav();"></i>
</div>
<ul>
<li class="responsiveNavItem"><span>Home</span></li>
<li class="responsiveNavItem"><span>Menu</span></li>
<li class="responsiveNavItem"><span>Our Story</span></li>
<li class="responsiveNavItem"><span>Contact Us</span></li>
</ul>
</div>
</div>

Answer 2

问题出现在CSS中的第58行：

#responsiveNav ul {
list-style: none;
text-align: center;
}

更改为：

#responsiveNav ul {
list-style: none;
text-align: right;
}