Question

我能够将text-align从center转换为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>

Answer 1

您正在对齐文本元素，如下所示：

margin-left: 100%;
margin-right: 100%;

这会将每个元素 - 从框的起点 - 定位到左右边缘。

因此，左移框的左边将与容器的左边缘对齐。

右移框的左边将与容器的右边缘对齐。这会导致此框的其余部分溢出。

请改为尝试：

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>

更多详情： Element will not stay centered, especially when re-sizing screen

将居中文本转换为左/右边缘而不会溢出

1 个答案: