移除列表float:left后链接出现下划线？如何独立居中页脚导航

一、下划线出现的原因 #

1. hover选择器错误：你写的.nav_links:hover是给整个顶部导航的<ul>元素添加下划线样式，而非针对单个链接。移除float:left后，<ul>的布局逻辑变化，hover时整个列表的文本都会继承下划线样式，导致所有链接出现下划线。
2. 全局样式污染：.nav_link li, a的选择器写法会选中所有<a>元素（逗号分隔的是两个独立选择器），虽然页脚链接单独写了样式，但这种全局覆盖容易引发优先级冲突或继承问题。
3. 全局ul的flex布局干扰：.nav_links, ul选择器给所有<ul>设置了display: flex，导致页脚的<ul>也强制使用flex布局，使你设置的text-align: center失效。

二、分步解决方法 #

1. 修复下划线问题 #

• 修正hover样式目标：把hover效果只绑定到顶部导航的链接上，替换原有错误的选择器：

/* 替换原来的.nav_links:hover */
.nav_links li a:hover {
   color:#3f8b7b;
   text-decoration: underline;
   font-weight: 600;
}

• 避免全局a样式污染：修改.nav_link li, a选择器，仅针对顶部导航的链接：

/* 替换原来的.nav_link li, a */
.nav_link li a {
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
    margin-left: 24px;
    margin-top: 24px;
    margin-bottom: 36px;
    text-decoration: none;
    color: #191a1a;
}

2. 实现页脚导航居中且不影响顶部 #

• 移除顶部导航的float：顶部导航的<ul>已经设置了display: flex，不需要用float来布局，直接去掉.nav_link li a里的float:left和display: inline即可，flex会自动横向排列列表项。
• 重置页脚ul的布局：给页脚的<ul>单独设置display: block，覆盖全局的flex设置，让text-align: center生效：

footer ul {
    margin: 0px;
    padding: 0;
    display: block; /* 覆盖全局ul的flex布局 */
}

3. 修正HTML语法错误 #

你的页脚ArtStation链接的class属性引号未闭合，会导致样式失效，修正为：

<li><a href="#" class="social_artstation">ArtStation</a></li>

最终关键CSS代码片段 #

/* 顶部导航 */
.nav_links li {
    margin-left: 24px;
}

.nav_links li a:hover {
   color:#3f8b7b;
   text-decoration: underline;
   font-weight: 600;
}

.nav_links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav_link li {
    padding: 0px 20px;
}

.nav_link li a {
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
    margin-left: 24px;
    margin-top: 24px;
    margin-bottom: 36px;
    text-decoration: none;
    color: #191a1a;
}

/* 页脚 */
footer {
   margin: 0 auto;
   height: 48px;
   padding-top: 24px;
   width: 100%;
   text-align: center;
}

footer ul {
    margin: 0px;
    padding: 0;
    display: block;
}

footer li {
  list-style-type: none;
  line-height: auto;
  height: 16px;
  padding: 0px 10px;
  display: inline;
}

footer li a{
    text-decoration: none;
    color: white;
    font-size: 16px;
}

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