HTML/CSS - 文本装饰不起作用答案

【问题标题】：HTML/CSS - Text-decoration does not workHTML/CSS - 文本装饰不起作用
【发布时间】：2017-02-10 16:55:28
【问题描述】：

我是 HTML 和 CSS 的初学者。所以，现在我有麻烦了。 text-decoration: none; 对我不起作用。你们能帮我找到解决办法吗？

* {
   margin: 0px;
   padding: 0px;
}

#Header {
  width: auto;
  height: 70px;
  background-color: #647551;
  margin-left: 0px;

}

#Header ul li {
  text-decoration: none;
  color: #645789;
  float: left;
  margin-left: 30px;

}

<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Gilles </title>
   </head>
   <body>
      <div id="Header">
         <ul>
            <li>Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
         </ul>
      </div>
      <p>Dit is een test website waar ik alles uittest, hierna ga ik er verder op in</p>
      <img source="images/Logo/TalkodyLogo.ai" />

   </body>
</html>

【问题讨论】：

它已经没有装饰了。
li 默认没有文字修饰。检查你的 CSS 的其余部分。
没有？我在 Chrome 中运行它，我在每个单词的开头看到了“子弹”。
使用列表样式 none 代替。像这样 #Header ul { list-style:none;}
文字修饰指的是链接下面的行。

标签： html css

【解决方案1】：

你需要申请list-style-type: none;来删除子弹

见下文：

* {
   margin: 0px;
   padding: 0px;
}

#Header {
  width: auto;
  height: 70px;
  
  margin-left: 0px;

}

#Header ul li {
  text-decoration: none;
  color: #645789;
  float: left;
  margin-left: 30px;
  list-style-type: none;

}

<body>
      <div id="Header">
         <ul>
            <li>Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
         </ul>
      </div>
      <p>Dit is een test website waar ik alles uittest, hierna ga ik er verder op in</p>
      <img source="images/Logo/TalkodyLogo.ai" />

   </body>

text-decoration: none;

将删除下面的文字装饰

underline     Defines a line below the text 
overline      Defines a line above the text 
line-through  Defines a line through the text

【讨论】：

【解决方案2】：

当你想从 ul 中删除项目符号时：

#header ul {
  list-style-type: none;
}

当您想从链接中删除下划线时，请使用：

#header li a {
    text-decoration: none;
    }

【讨论】：

【解决方案3】：

您想将此添加到您的 CSS 中：

#header ul {
  list-style:none;
}

【讨论】：

【解决方案4】：

文本已经没有装饰，所以如果你想要它从列表中删除项目符号，那么使用：

ul {
   list-style-type: none;
}

【讨论】：

【解决方案5】：

* {
   margin: 0px;
   padding: 0px;
}

#Header {
  width: auto;
  height: 70px;
  background-color: #647551;
  margin-left: 0px;

}

#Header ul li {
  text-decoration: none;
  color: #645789;
  float: left;
  margin-left: 30px;
  list-style:none;


}

<!DOCTYPE html>
<html>
   <head>
      <link href="css/Main.css" type="text/css" rel="stylesheet" />
      <meta charset="utf-8">
      <title>Talkody - Gilles </title>
   </head>
   <body>
      <div id="Header">
         <ul>
            <li>Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
         </ul>
      </div>
      <p>Dit is een test website waar ik alles uittest, hierna ga ik er verder op in</p>
      <img source="images/Logo/TalkodyLogo.ai" />

   </body>
</html>

【讨论】：