Html 停止侧导航栏挤压内容

我正在使用示例代码创建侧导航栏，请参见下面的代码：

身体{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
过渡：左边距。5s；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
侧导航推送示例
单击下面的元素打开侧面导航菜单，并将此内容向右推

☰ 打开
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
}

您只需将Findme和About之间的空格更改为非中断空格，

Findme About

编辑：也许更好的答案是将

空白：nowrap

CSS属性应用于

.sidenav a

样式

试试这个：

.sidenav{
    white-space: nowrap;
}

---

这将防止您的

li a

换行

Gosh！工作起来很有魅力！非常感谢你！我很高兴这有帮助！：）@罗恩，巴斯科，你是救命恩人谢谢你，你已经被困在这上面一段时间了！