Question

我希望当您将鼠标悬停在其上时可以移动的“按钮”，并且在单击该按钮时可以转到另一个页面。问题在于文本位于屏幕的最左侧并且不位于屏幕外。（顶部的按钮在顶部，右侧的按钮很好；我不包括那些按钮，但如果您要让他们问的话）。

当尝试将其移到右侧时，它会带走整个“盒子”。

我尝试过float:right, left:x px, right:x px, text-align:right。

我不知道还有什么可以尝试的。

#sideNavLeft a {
  position: fixed;
  left: -100px;
  transition: 0.3s;
  padding: 15px;
  width: 9%;
  text-decoration: none;
  font-size: 20px;
  color: white;
  top: -6px;
  bottom: -52px;
  background-color: #696969;
}

#sideNavLeft a:hover {
  left: 0;
}

.Links {
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
}

<div class="col-sm-4">
  <div id="sideNavLeft" onclick="location.href='Webshop.aspx';" style="cursor: pointer;">
    <%-- Webshop --%>
      <a href="#" class="Links">WEBSHOP</a>
  </div>
</div>

文本应在框的右侧，在屏幕上。现在，它在左侧，仅在将鼠标悬停在盒子上时出现。

Answer 1

使用writing-mode旋转文本时，垂直对齐和文本对齐不再起作用。

最简单的解决方案是将容器设置为display: flex并使用align-items（使用flex-start，center或flex-end的水平轴对齐）或justify-content（垂直轴）。

我用transform: translateX()代替了left来制作平滑动画的滑动效果/动画，请阅读为什么使用here。

最后，我使用固定宽度（像素而不是百分比）来更好地控制侧边栏中显示的文本量（例如，小屏幕的10％根本不会显示文本）。

#sideNavLeft a {
  position: fixed;
  
  top:-6px;
  bottom:-52px;
  
  padding: 1em;
  
  /* I would suggest using a fixed width to always have the same amount of text showing */
  /* width: 9%; */
  width: 160px;
  
  color: white;
  font-size: 20px;
  background-color: #696969;
  text-decoration: none;
  
  /* Used transform instead of 'left' for a smoother animation */
  /* If you want to use a percentage width, use percentage here as well */
  transform: translateX(-90px);
  transition: 0.3s;
  
  /* Used flexbox to be able to align the text to the right side */
  display: flex;
  
  /* Optional : centering the text along the vertical axis */
  justify-content: center;
  
  /* Aligns the text to the right of its flexbox container */
  align-items: flex-end;
}

#sideNavLeft a:hover {
  transform: translateX(0);
}

.Links {
    writing-mode: vertical-lr;
    text-orientation: upright;
    text-align:center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="col-sm-4">
  <div id="sideNavLeft" onclick="location.href='We`enter code here`bshop.aspx';" style="cursor: pointer;">
      <a href="#" class="Links">WEBSHOP</a>
  </div>
</div>

PS：简单的研究会帮助您找到答案，请参阅： Setting vertically middle in writing-modes或Align right with "writing-mode: vertical-lr" in a fixed width container

如果不移动“框”，似乎无法将文本移到右侧

1 个答案: