html - Text-Decoration: none Not working for links?

Question

text-decoration: none; Is not working... My browser is Chrome, and the code is below:

.hotbar li {
  float: right;
  display: inline-block;
  color: red;
  margin: 0 50px;
  text-decoration: none;
}

<nav class="hotbar">
  <ul>
    <li> <a href="http://127.0.0.1:64310/about.html" target="_blank">About</a></li>
    <li> <a href="http://127.0.0.1:64310/platforms.html" target="_blank">Platforms</a></li>
    <li> <a href="http://127.0.0.1:64310/contact.html" target="_blank">Contact</a></li>
  </ul>
</nav>

标签： htmlcss

Answer 1

您需要从锚点中删除文本装饰。因此，将您的选择器更改为.hotbar li a

.hotbar li a {
  float: right;
  display: inline-block;
  color: red;
  margin: 0 50px;
  text-decoration: none;
}

<nav class="hotbar">
  <ul>
    <li> <a href="http://127.0.0.1:64310/about.html" target="_blank">About
                        </a></li>
    <li> <a href="http://127.0.0.1:64310/platforms.html" target="_blank">Platforms
                        </a></li>
    <li> <a href="http://127.0.0.1:64310/contact.html" target="_blank">Contact
                        </a></li>
  </ul>
</nav>