如何修复导航栏文本不横向排列及hover背景不填满div问题

问题修复方案 #

核心错误原因 #

你遇到的两个问题都是CSS选择器语法错误、选择器大小写/属性类型不匹配导致的：

1. HTML中导航容器用的是id="navBar"，CSS中错误用类选择器.navBar匹配，且大小写混乱（先后写了.navBAr/.navBar/.navbar三种写法），所有导航相关样式几乎都没生效
2. CSS中错误使用逗号代替空格表示后代选择，比如.navBar,li实际是同时选中.navBar元素和所有li元素，而非选中.navBar下的li元素

修正后的完整CSS代码 #

body {
    margin: 0;
    padding: 0;
    background-color: rgb(187, 190, 4);
    font-family: Arial;
}
/* 选中id为navBar下的ul */
#navBar ul {
    list-style: none;
    background: #401f99;
    padding: 0;
    margin: 0;
    text-align: center;
}
/* 选中navBar下的所有li，设置横向排列 */
#navBar li {
    display: inline-block;
    /* 去掉li之间默认的空白间隙 */
    margin-right: -4px;
}
/* 选中navBar下的所有a标签 */
#navBar a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 25px 20px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}
/* 选中navBar下的a标签hover状态 */
#navBar a:hover {
    background: orange;
}

改动说明 #

• 把原来的类选择器全部替换为id选择器#navBar，和HTML中的id属性匹配，消除大小写混乱导致的样式不生效问题
• 把选择器中的错误逗号改为空格，表示选中父元素下的后代元素，匹配规则符合预期
• 给li添加margin-right: -4px，消除inline-block元素默认的横向间隙，避免hover时导航项之间出现空白缝隙
• 删掉a标签多余的固定宽度width:100px，避免文字过长时被截断，同时让hover背景完全覆盖每个导航项的区域

HTML代码不需要改动，替换CSS内容即可解决两个问题。

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