Javascript 内容显示在导航栏下方,而不是其右侧

Javascript 内容显示在导航栏下方,而不是其右侧,javascript,html,css,navbar,Javascript,Html,Css,Navbar,我的页面左侧有一个导航栏,我添加到页面的新内容显示在导航栏下方,而不是右侧。我如何解决这个问题?您可以在下面找到相关的HTML和CSS代码,以及两张图片,它们正好显示了我的意思 我拥有的与我想要的(我使用photoshop拍摄第二张照片): 正文{ 溢出x:隐藏; } .侧边栏{ 宽度:260px; 填充顶部:40px; 垫底:0px; 垂直对齐:顶部; 显示:块; 背景色:#292929; z指数:100; 身高:100%; } .侧边栏a{ 显示:块; 填充:20px 10px; 边框

我的页面左侧有一个导航栏,我添加到页面的新内容显示在导航栏下方,而不是右侧。我如何解决这个问题?您可以在下面找到相关的HTML和CSS代码,以及两张图片,它们正好显示了我的意思

我拥有的与我想要的(我使用photoshop拍摄第二张照片):

正文{
溢出x:隐藏;
}
.侧边栏{
宽度:260px;
填充顶部:40px;
垫底:0px;
垂直对齐:顶部;
显示:块;
背景色:#292929;
z指数:100;
身高:100%;
}
.侧边栏a{
显示:块;
填充:20px 10px;
边框顶部:1px实心#161616;
}
.menu_侧边栏{
显示:无;
字体大小:20px;
}
.menu_侧边栏li{
填充:10px;
颜色:白色;
字体系列:“Segoe UI”、“Helvetica Neue”、“Helvetica”、“Roboto”、“Oxygen”、“Ubuntu”、“Cantarell”、“Fira Sans”、“Droid Sans”、“Sans serif”;
字体大小:20px;
}
.main_侧边栏{
显示:块;
边框顶部:1px实心#161616;
柔性生长:1;
光标:指针;
}
.main_侧边栏li{
填充:20px 10px;
颜色:白色;
字体系列:“Segoe UI”、“Helvetica Neue”、“Helvetica”、“Roboto”、“Oxygen”、“Ubuntu”、“Cantarell”、“Fira Sans”、“Droid Sans”、“Sans serif”;
字号:17px;
}
.main_侧边栏li:悬停{
颜色:白色;
背景:#2929;
-o型过渡:颜色。25秒缓进,背景。25秒缓进;
-ms过渡:颜色。25秒缓进,背景。25秒缓进;
-moz过渡:颜色。25秒慢放,背景。25秒慢放;
-webkit过渡:颜色。25秒易出,背景。25秒易入;
/*…现在用正确的CSS属性覆盖*/
过渡:颜色。25秒放松,背景。25秒放松;
背景色:#232323;
}
.内部侧栏a:激活{
右边框:4px实心#1D3D54;
宽度:91%;
背景色:#232323;
}
.内部侧栏a{
填充:0px;
身高:0;
不透明度:0;
边框顶部:0px;
-webkit过渡:所有0.5s轻松;
-moz转换:所有0.6秒的易用性;
指针事件:无;
}
.内部侧栏a.激活{
溢出:可见;
不透明度:1;
高度:18px;
宽度:92%;
填充:6px 10px;
边框顶部:0px;
指针事件:自动;
}
.内部侧边栏a li{
颜色:白色;
字体系列:“Segoe UI”、“Helvetica Neue”、“Helvetica”、“Roboto”、“Oxygen”、“Ubuntu”、“Cantarell”、“Fira Sans”、“Droid Sans”、“Sans serif”;
字体大小:12px;
}
.内部侧栏a:悬停{
颜色:白色;
背景:#2929;
-o型过渡:颜色。25秒缓进,背景。25秒缓进;
-ms过渡:颜色。25秒缓进,背景。25秒缓进;
-moz过渡:颜色。25秒慢放,背景。25秒慢放;
-webkit过渡:颜色。25秒易出,背景。25秒易入;
/*…现在用正确的CSS属性覆盖*/
过渡:颜色。25秒放松,背景。25秒放松;
背景色:#232323;
}
.菜单关闭{
浮动:对;
}
雪佛龙先生{
浮动:对;
}
/*流动的*/
.菜单切换{
颜色:白色;
浮动:左;
填充:10px 10px;
字体大小:15px;
光标:指针;
显示:无;
}
.菜单切换李{
垂直对齐:中间对齐;
填充:2.5px0px;
}
.菜单切换:悬停{
颜色:白色;
背景:#2929;
-o型过渡:颜色。25秒缓进,背景。25秒缓进;
-ms过渡:颜色。25秒缓进,背景。25秒缓进;
-moz过渡:颜色。25秒慢放,背景。25秒慢放;
-webkit过渡:颜色。25秒易出,背景。25秒易入;
/*…现在用正确的CSS属性覆盖*/
过渡:颜色。25秒放松,背景。25秒放松;
背景色:#185886;
}
@介质(最大宽度:1000px){
.菜单切换{
显示:块;
}
.menu_侧边栏{
显示:块;
}
.sidebar.active{
左:0;
}
.侧边栏{
位置:绝对位置;
宽度:260px;
背景:#2929;
顶部:0px;
左-100%;
过渡:0.5s;
显示:网格;
填充顶部:0px;
溢出y:滚动;
溢出x:隐藏;
}
}

  • 菜单
  • 仪表板
  • 统计数据
测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容

测试内容


以包装器主界面为目标,设置为flex添加到css主界面{display:flex;}

最小可复制示例。您的代码不会生成您显示给我们的内容。@ruudverhoe如果文本为白色,这就是为什么它看起来不会生成的原因。我现在就把它变成黑色。你好@教父非常感谢,这修正了t