Question

我在我的网站上创建了一个sidenav（甚至不确定它是否是它的名字）但是当我关闭它时，sidenav中的文本变得混乱了。我尝试了@media screen and (max-width: 50px)，但当然没有在叠加层上工作。

如果你想看看我的意思： https://jsfiddle.net/ehyLghy8/ 相信我，在我的最终网站上看起来更糟。

当我关闭导航时，有没有办法让文字站到位而不向左移动？

抱歉英语不好

Answer 1

尝试white-space: nowrap标签

form label {  
  white-space: nowrap;
}

这是理想的行为吗？

Answer 2

您可以使用transform属性而不是width：

我在你的css中添加这个

#myNav{
  width:100%;
  transform: translateX(-100%)
}

并修改您的函数以使用transform：

function openNav() {
    document.getElementById("myNav").style.transform = "translateX(0)";
} 

function closeNav() {
    document.getElementById("myNav").style.transform = "translateX(-100%)";
}

Answer 3

如果向表单元素添加最小宽度，则可以获得相应的结果。

例如min-width: 600px;将实现以下目标：https://jsfiddle.net/ehyLghy8/1/

通过这样做，我们说我们不希望该元素小于600px，因此文本不会包装

当我关闭它时，sidenav中的文本会搞砸

3 个答案: