导航栏分隔线无法延伸至左侧？求助解决方案

你的问题出在默认HTML元素的内置样式——<ul>标签默认带有padding-left，导致列表内容和分隔线都往右侧偏移，没法贴到导航栏左边缘；另外你同时用了<hr>和li的border-bottom，造成重复分隔线，也加重了对齐问题。

修改后的CSS #

#navbar{
    width: 10vw;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /* 去掉right:0，避免和width属性冲突导致宽度异常 */
    background-color: red;
}

nav > ul{
    list-style-type: none;
    /* 清除ul默认的内边距和外边距，让内容贴紧导航栏边缘 */
    padding: 0;
    margin: 0;
    border-bottom: 3px solid;
    border-top: 3px solid;
}

nav > ul > li{
    /* 让li宽度铺满父容器ul */
    width: 100%;
    border-bottom: 5px solid;
    /* 可选：添加内边距让内容不贴边缘，box-sizing确保内边距不撑开宽度 */
    padding: 8px 10px;
    box-sizing: border-box;
}

修改后的HTML #

<nav id="navbar">
    <ul>
        <li>A</li>
        <li>A</li>
        <li>A</li>
        <li>A</li>
        <li>A</li>
        <li>A</li>
        <li>A</li>
        <li>A</li>
    </ul>
</nav>

关键修改说明 #

• 给nav > ul设置padding:0; margin:0;：直接清除列表默认的内边距，让分隔线和列表内容贴到导航栏左边缘
• 移除所有<hr>标签：你已经用li的border-bottom实现分隔线，重复的<hr>只会造成多余线条和布局混乱
• 给li添加width:100%; box-sizing: border-box;：确保li宽度完全铺满导航栏，分隔线自然延伸到左右两端；box-sizing保证内边距不会让li超出导航栏宽度
• 删除#navbar的right:0：已有width和left属性，right:0会强制导航栏拉伸到屏幕右侧，破坏固定宽度的侧边栏布局

内容的提问来源于stack exchange，提问作者Rifta