Html 如何将侧边栏与css对齐？

我试图制作一个简单的侧边栏，直到现在我才编写了这段代码，但我不知道如何使它向右浮动，我很困惑

这里有一个链接

\u侧边栏{
位置：绝对位置；
z指数：2；
顶部：3rem；
底部：0；
左：0；
页边顶部：1px；
溢出x：隐藏；
溢出y：滚动；
背景#f9f9f9；
背景图像：初始；
背景位置x：初始；
背景位置y：初始；
背景尺寸：初始尺寸；
背景重复x：初始；
背景重复y：初始；
背景附件：首字母；
背景来源：初始；
背景剪辑：内容框；
背景色：rgb（249249）；
背景剪辑：内容框；
-webkit溢出滚动：触摸；
-ms溢出样式：无；
}
部分{
大纲：0；
宽度：300px；
轮廓颜色：首字母；
大纲样式：首字母；
轮廓宽度：0px；
}
在一边
第节，
div{
显示：块；
}
身体{
身高：50%；
保证金：0；
溢出：自动；
字体：普通1em/1.7“开放式Sans”，Helvetica，Arial，无衬线；
字体风格：普通；
字体变体：正常；
字体大小：正常；
字体拉伸：正常；
字号：1em；
线高：1.7；
字体系列：“开放式Sans”、Helvetica、Arial、Sans serif；
颜色：#333；
单词包装：打断单词；
溢出包装：断开单词；
-webkit点击突出显示颜色：透明；
-webkit触摸标注：无；
-webkit文本大小调整：100%；
-ms文本大小调整：100%；
}
.\u侧栏：：-webkit滚动条{
-webkit外观：无；
背景色：rgb（255、255、255）；
宽度：10px；
}
.\u侧栏：：-webkit滚动条按钮{
显示：无；
}
.\u侧边栏：：-webkit滚动条拇指{
最小高度：2em；
背景：#d2d2d2；
背景图像：初始；
背景位置x：初始；
背景位置y：初始；
背景尺寸：初始尺寸；
背景重复x：初始；
背景重复y：初始；
背景附件：首字母；
背景来源：初始；
背景剪辑：填充框；
背景色：rgb（210210210）；
背景剪辑：填充框；
边框：3px实心#fff；
边框顶部颜色：rgb（255、255、255）；
边框顶部样式：实心；
边框顶部宽度：3倍；
右边框颜色：rgb（255、255、255）；
右边框样式：实心；
右边框宽度：3px；
边框底色：rgb（255、255、255）；
边框底部样式：实心；
边框底宽：3倍；
左边框颜色：rgb（255、255、255）；
左边框样式：实心；
左边框宽度：2px；
边界半径：5px；
边框左上半径：5px；
边框右上角半径：5px；
边框右下半径：5px；
边框左下半径：5px；
}
名单{
保证金：0；
填充：0；
列表样式：无；
宽度：18rem；
盒影：插图-1px0#e3；
}

对于您的

\u侧栏

，只需更改属性：

left:0;

致：

您已经使用了绝对定位，因此这将起作用

---

这里有一个

用于您的

\u侧边栏

，只需更改属性：

left:0;

致：

您已经使用了绝对定位，因此这将起作用

下面是一个删除：

position : absolute;

并将其替换为float:right:

._sidebar{
    float: right;
    z-index: 2;
    margin-top: 3rem;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #f9f9f9;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: content-box;
    background-color: rgb(249, 249, 249);
    background-clip: content-box;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

删除：

position : absolute;

并将其替换为float:right:

._sidebar{
    float: right;
    z-index: 2;
    margin-top: 3rem;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #f9f9f9;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: content-box;
    background-color: rgb(249, 249, 249);
    background-clip: content-box;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}

---

尝试删除

position:absolute

并在

侧栏

选择器中添加

float:right

，

尝试删除

position:absolute

并在

侧栏

选择器中添加

float:right

，

此代码有点笨拙，但如果您只是想将其移到右侧，只需将

left:0

更改为

right:0

\u侧边栏{
位置：绝对位置；
z指数：2；
顶部：3rem；
底部：0；
右：0；
页边顶部：1px；
溢出x：隐藏；
溢出y：滚动；
背景#f9f9f9；
背景图像：初始；
背景位置x：初始；
背景位置y：初始；
背景尺寸：初始尺寸；
背景重复x：初始；
背景重复y：初始；
背景附件：首字母；
背景来源：初始；
背景剪辑：内容框；
背景色：rgb（249249）；
背景剪辑：内容框；
-webkit溢出滚动：触摸；
-ms溢出样式：无；
}
部分{
大纲：0；
宽度：300px；
轮廓颜色：首字母；
大纲样式：首字母；
轮廓宽度：0px；
}
在一边
第节，
div{
显示：块；
}
身体{
身高：50%；
保证金：0；
溢出：自动；
字体：普通1em/1.7“开放式Sans”，Helvetica，Arial，无衬线；
字体风格：普通；
字体变体：正常；
字体大小：正常；
字体拉伸：正常；
字号：1em；
线高：1.7；
字体系列：“开放式Sans”、Helvetica、Arial、Sans serif；
颜色：#333；
单词包装：打断单词；
溢出包装：断开单词；
-webkit点击突出显示颜色：透明；
-webkit触摸标注：无；
-webkit文本大小调整：100%；
-ms文本大小调整：100%；
}
.\u侧栏：：-webkit滚动条{
-webkit外观：无；
背景色：rgb（255、255、255）；
宽度：10px；
}
.\u侧栏：：-webkit滚动条按钮{
显示：无；
}
.\u侧边栏：：-webkit滚动条拇指{
最小高度：2em；
背景：#d2d2d2；
背景图像：初始；
背景位置x：初始；
背景位置y：初始；
背景尺寸：初始尺寸；
背景重复x：初始；
背景重复y：初始；
背景附件：首字母；
背景来源：初始；
背景-