Question

I am designing a web page and I want to remove the underline from the links in my nav bar. I decided to use text-decoration: none; but I am facing the issue where all other styles, such as text alignment, are ignored.

Here's what my code looks like...

.nav-bar a {
  text-align: center;
  text-transform: uppercase;
  font-family: "Varela Round";
  font-size: 20px;
  text-decoration: none;
}

<div class="nav-bar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</div>

Thanks, I would really appreciate the help!

Answer 1

试试这个

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation</title>
        <style type = "text/css">
            ul#nav-bar
            {
                list-style: none;
                margin: 0;
            }

            ul#nav-bar li
            {
                display: inline;
            }

            ul#nav-bar a
            {
                text-transform: uppercase;
                font-family: "Varela Round";
                font-size: 20px;
                text-decoration: none;
                padding: 5px;
            }
        </style>
    </head>

    <body>
        <div>
            <ul id = "nav-bar">
              <li><a href = "#home">Home</a></li>  
              <li><a href = "#about">About</a></li>
              <li><a href = "#contact">Contact</a></li>
            </ul>
        </div>
    </body>
</html>

无需使用text-align: center。如果您的样式应用于一个地方，也可以使用id属性而不是class。

使用text-decoration：none;在<a> elements removes all other styles

1 个答案: