导航栏首个列表项“All”文本未与其余列表项居中对齐问题求助

• HTML语法错误：所有<a>标签的闭合写法错误，你使用的<a />是错误的自闭合格式，正确的闭合标签应为</a>。浏览器解析错误的闭合标签时，会优先把首个<li>内的内容解析为嵌套结构，直接导致首个列表项的文本排版错位。
• 样式挂载逻辑不合理：你将边框样式加在了设置为display: inline的<li>元素上，inline元素无法直接控制内部文本的上下对齐，且你把内边距padding加在了子元素<a>上，父级边框和子级内边距的计算错位会放大居中偏差。
• CSS冗余代码：你重复写了两次#header #NavBar #all的边框样式，无实际作用还可能干扰样式优先级判断。

步骤1：修正HTML的标签闭合错误 #

把导航栏内所有错误的<a />替换为</a>，修正后代码如下：

<ul id="NavBar">
    <li id="all"><a href="#">All</a></li>
    <li id="breakfast"><a href="#">Breakfast</a></li>
    <li id="lunch"><a href="#">Lunch</a></li>
    <li id="dinner"><a href="#">Dinner</a></li>
</ul>

步骤2：调整CSS布局逻辑（二选一即可） #

方案1：调整li的布局属性（推荐，后续扩展更灵活） #

把<li>的显示模式改为inline-block，同时将重复的边框样式合并为公共样式，删除每个id单独写的重复边框代码：

#header #NavBar li {
    display: inline-block;
    margin-left: 10px;
    text-align: center;
    /* 公共边框样式，不需要再给每个li的id单独写边框 */
    border: 2px solid #ffcc00;
    border-radius: 5px;
}

方案2：把边框从li迁移到a标签上 #

如果不想修改li的显示模式，直接把边框样式移到<a>标签上即可：

#header a {
    text-decoration: none;
    padding: 5px;
    color:#ffcc00;
    font-weight:100;
    /* 新增属性 */
    vertical-align: middle;
    border: 2px solid #ffcc00;
    border-radius: 5px;
}
/* 同时删除所有li id对应的边框样式 */

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