如何使用CSS从li元素中删除下划线

Question

我正在使用NextJs框架进行前端开发，我是新手，我正在尝试创建导航栏，在菜单项下面得到下划线。我尝试了很少的CSS属性，但它们没有成功。

下面是我的代码：

Navbar.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;

global.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;
}