我能够过渡text-align from center to left。有了这段代码，如果你运行它，然后将鼠标悬停在上面，你会看到顶部的代码移到了左边。然而底部溢出right;我怎样才能弄清楚如何过渡到right不溢出？
注意：这是我的真实应用程序的演示，其中具有未知/可变宽度的字符串/元素，从 1 到任何填充单行的值（无换行）。
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title {
text-align: center;
}
.menu {
text-align: center;
}
.trans-left {
transition: margin-right 1s;
}
.trans-right {
transition: margin-left 1s;
}
.header:hover .trans-left {
margin-right: 100%;
}
.header:hover .trans-right {
margin-left: 100%;
}
<body>
<div class='header'>
<div class='title'>
<span class='trans-left'>This one goes left</span>
</div>
<div class='menu'>
<span class='trans-right'>This one goes right</span>
</div>
</div>
</body>
您将像这样对齐文本元素：
margin-left: 100%;
margin-right: 100%;
这对每个元素进行定位 –从盒子的起点– 到左边缘和右边缘。
因此，左边缘向左移动的盒子的边缘将与容器的左边缘对齐。
And the 左边缘向右移动的盒子的边缘将与容器的右边缘对齐。这会导致该框的其余部分溢出。
试试这个：
margin-right: 90%; /* adjust as needed */
根据修改后的问题进行编辑
这是一种无论内容宽度如何都有效的替代解决方案。
.header {
position: fixed;
width: 70%;
background-color: springgreen;
}
.title, .menu {
text-align: center;
position: relative;
width: 100%;
height: 50px;
}
.trans-left {
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: 1s;
}
.trans-right {
position: absolute;
right: 50%;
transform: translateX(50%);
transition: 1s;
}
.header:hover .trans-left {
left: 0;
transform: translateX(0);
transition: 1s;
}
.header:hover .trans-right {
right: 0;
transform: translateX(0);
transition: 1s;
}
<div class="header">
<div class="title">
<span class="trans-left">This one goes left</span>
</div>
<div class="menu">
<span class="trans-right">This one goes right</span>
</div>
</div>
更多细节：元素不会保持居中，尤其是在调整屏幕大小时 https://stackoverflow.com/q/36817249/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
