无法使用 CSS 从 li 元素中删除下划线

Question

我正在使用 NextJs 框架进行前端开发 我是前端的新手 我正在尝试创建导航栏，其中我在菜单项下方加下划线。我尝试了几个 CSS 属性，但没有成功。

下面是我的代码：

导航栏.js

import Link from 'next/link';

const Navbar =  () => {

return(
    <nav className='navigation'>
        <div className="logo">
            <h1>My logo</h1>
        </div> 
        <div className="menu">
            <ul>
                <li className="menu-items"><Link href="/">Home</Link></li>
                <li className="menu-items"><Link href="/about">About</Link></li>
                <li className="menu-items"><Link href="/contact">Contact</Link></li>
            </ul>
        </div>     
    </nav>
  );
}

export default Navbar;

全局.css

 html,
 body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
   Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }

 .navigation {
 display: flex;
 justify-content: space-between;
}

 .menu-items {
 list-style-type: none;
 display: inline;
 margin-right: 20px;
 background-color: coral;
 color: white;
 padding: 10px;
 border-radius: 3px; 
}

有人让我知道我怎样才能达到预期的结果任何帮助将不胜感激。

Answer 1

尝试使用“文字装饰”。

.menu-items {
 list-style-type: none;
 display: inline;
 margin-right: 20px;
 background-color: coral;
 color: white;
 padding: 10px;
 border-radius: 3px;
 text-decoration: none; /* <=== add this */
}

如果不起作用，试试这个。

.menu-items > a {
  text-decoration: none;
}