为什么这个导航栏会变成这样？

Question

我想要一个导航栏，其中包含没有下划线的白色文本链接，但它出现在 div 中的基本链接中，所以没有用，但我不知道缺少什么。

任何建议都会被采纳。

<html>
<style>
.box3{
  padding:7px;
  background: black;
  font-family: arial;
  font-size:15px;
 }
 </style>
 
 <div class="box3">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
 </div>

</html>

Answer 1

您需要为链接添加样式，例如您可以添加

.box3 a {
  color: white;
  text-decoration: none;
}

这会将颜色更改为白色并删除下划线。

.box a { css } 只会定位 box3 内的 a 标签 div

.box3 {
  padding: 7px;
  background: black;
  font-family: arial;
  font-size: 15px;
}

.box3 a {
  color: white;
  text-decoration: none;
}

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

为什么这个导航栏会变成这样？

Why has this navigation bar appeared like this?

html

css

navigationbar