CSS：无论如何都无法编辑链接答案

【问题标题】：CSS: Can't edit links no matter whatCSS：无论如何都无法编辑链接
【发布时间】：2022-01-15 02:40:40
【问题描述】：

CSS 确实是一门可爱的语言。我正在尝试将我的第一个登录页面创建为个人项目，现在我一直在尝试编辑锚标签/超链接。这里的问题是，无论我做什么，我都无法删除项目符号点（列表样式），更改字体颜色（颜色），将文本更改为内联（显示）然后删除下划线（文本装饰)。

HTML：


<!DOCTYPE html>

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Landing Page</title>


   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Luxurious+Script&family=Roboto:wght@100&family=The+Nautigal&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<nav class="navbar">

<label class="logo">Placeholder</label>

<ul id="links"> 

<li><a href="landingpage.html">Link one</a></li>
<li><a href="landingpage.html">Link two</a></li>
<li><a href="landingpage.html">Link three</a></li>

</ul>

</nav>

</header>


   
</body>

</html>

CSS：

body {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


nav {

    background: #1f2937;
    height: 70px;
    width: 100%;
    color: white;
    padding-top: 20px;
    padding-bottom: 10px;
    display: flex;
    
    
}

.logo {
  
    font-size: 2.5rem;
    font-family: Luxurious Roman; 
  
}

nav ul li a  {

    color: white;
    list-style: none ;
    text-decoration: none;
    background-color: royalblue;
    display: inline;
}

【问题讨论】：

标签： html css hyperlink css-selectors anchor

【解决方案1】：

您没有将 css 属性与它们所指的 html 元素一起使用，您应该这样做：

nav ul li{
  list-style: none;
  display: inline;
}
nav ul li a  {
    color: red;
    text-decoration: none; 
}

list-style 属性应应用于<li> 元素，color and text-decoration 应应用于<a> 元素。

【讨论】：

【解决方案2】：

我已经创建了 HTML 和 CSS 文档来测试您的文件，基本上这里的问题是您的 css 说明，我可以帮助您，首先，如果您想修改您的列表删除项目符号点，你必须先正确使用css选择器：

当前：

nav ul li a  {

    color: white;
    list-style: none ;
    text-decoration: none;
    background-color: royalblue;
    display: inline;
}

但选择器选择的是a 标签，所以如果您想删除列表中的项目符号点，您可以使用如下内容：

nav ul {
    
  list-style-type: none;
}

我会将这些链接放在这里，它们可能对您有所帮助，因为它们在我学习时对我有所帮助：

https://web.dev/learn/css/

https://www.w3schools.com/css/

【讨论】：

【解决方案3】：

我们知道flex，将元素的子元素放在一个列中，
所以元素将是一个正确的另一个
而不是另一个...

所以你让导航弯曲，但导航
直接有孩子的1.<label>和2.<ul>

我们需要像孩子一样拥有

元素，所以我把flex也放在<ul>中

    nav,
    ul {
      display: flex;
    }

并将list-style-type 添加到none（在<ul> 中），因此列表前不再有项目符号

nav ul {
    list-style-type: none;
    gap: 10px;
}

还添加了一个gap，类似于边距（因为<ul> 中有flex，所以有效

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background: #1f2937;
  height: 70px;
  width: 100%;
  color: white;
  padding-top: 20px;
  padding-bottom: 10px;
}

.logo {
  font-size: 2.5rem;
  font-family: Luxurious Roman;
}

nav ul li a {
  color: white;
  list-style: none;
  text-decoration: none;
  /* background-color: royalblue; */
  display: inline;
}

nav,
ul {
  display: flex;
}

nav ul {
  list-style-type: none;
  gap: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Luxurious+Roman&family=Luxurious+Script&family=Roboto:wght@100&family=The+Nautigal&display=swap" rel="stylesheet">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <!-- navbar -->
    <nav class="navbar">
      <!-- logo -->
      <label class="logo">Placeholder</label>
      <!-- links -->
      <ul id="links">
        <!-- 1 -->
        <li>
          <a href="landingpage.html">Link one</a>
        </li>
        <!-- 2 -->
        <li>
          <a href="landingpage.html">Link two</a>
        </li>
        <!-- 3 -->
        <li>
          <a href="landingpage.html">Link three</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

</html>

【讨论】：