Question

嗨，伙计们，当我使用链接时，我的li标签存在一个小问题，因为我试图在悬停在它们上面时强调它但由于某种原因我似乎无法使其正常工作。谁能看到我在哪里错了？

由于

body {
  margin: 0;
  background-color: #f6f4fb;
}

p {
  margin: 0;
}

#header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 2px solid #e1dfe1;
}

#logo {
  float: left;
  padding-left: 30px;
  padding-top: 15px;
}

#name {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding-top: 25px;
  padding-left: 30px;
}

#name a {
  text-decoration: none;
  color: #666;
}

#headerButtons {
  float: right;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #999;
}

#headerButtons ul {
  margin: 0;
}

#headerButtons li {
  float: right;
  list-style-type: none;
  padding-right: 40px;
  padding-top: 30px
}

#headerButtons a {
  text-decoration: none;
  color: #999;
}

#headerButtons a:hover {
  text-decoration: underline;
}

<div id="header">
  <div id="logo">
    <img src="IMAGES/Logo.svg" width="50px" height="50px">
  </div>
  <div id="name">
    <a href="index.php">
      <p>Project Archive</p>
    </a>
  </div>
  <div id="headerButtons">
    <ul>
      <a href="Login.php">
        <li>Register</li>
      </a>
      <a href="Register.php">
        <li>Login</li>
      </a>
    </ul>
  </div>
</div>

Answer 1

您无法在li代码中使用a代码，li必须在ul代码内

＆＃13;

body {
  margin: 0;
  background-color: #f6f4fb;
}

p {
  margin: 0;
}

#header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 2px solid #e1dfe1;
}

#logo {
  float: left;
  padding-left: 30px;
  padding-top: 15px;
}

#name {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding-top: 25px;
  padding-left: 30px;
}

#name a {
  text-decoration: none;
  color: #666;
}

#headerButtons {
  float: right;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #999;
}

#headerButtons ul {
  margin: 0;
}

#headerButtons li {
  float: right;
  list-style-type: none;
  padding-right: 40px;
  padding-top: 30px
}

#headerButtons a {
  text-decoration: none;
  color: #999;
}

#headerButtons a:hover {
  text-decoration: underline;
}

＆＃13;

<div id="header">
  <div id="logo">
    <img src="IMAGES/Logo.svg" width="50px" height="50px">
  </div>
  <div id="name">
    <a href="index.php">
      <p>Project Archive</p>
    </a>
  </div>
  <div id="headerButtons">
    <ul>
      <li>
        <a href="Login.php">
        Register
        
      </a>
      </li>
      <li>
        <a href="Register.php">
        Login
      </a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

根据HTML规范，无法在其中添加锚点   ul标签

正确的方法是，将所有锚标记放在li标记内。因此，您的CSS已正确应用于文本节点。

虽然上述原因并不是您的风格未应用的原因。

下面解释了为什么浏览器没有添加样式。

您的HTML结构在锚标记

中有li标记

<a href="Login.php">
    <li>Register</li>
</a>

并且您试图在悬停锚标记时为您的CSS中的文字加下划线。

#headerButtons a:hover {
   text-decoration: underline;
}

这不起作用。因为，您的锚标记具有li节点而不是文本节点，因此不应用css text-decoration: underline;样式。

您必须在锚点节点悬停时选择li标记，以将css应用于文本节点。

要执行此操作，请添加此CSS （我不建议使用此方法。）

 #headerButtons a:hover>li {
    text-decoration: underline;
 }

SNIPPET

（你不应该使用下面的代码片段。）

此代码段只是为了演示可以应用样式。您应该使用下一个代码段。

＆＃13;

body {
  margin: 0;
  background-color: #f6f4fb;
}

p {
  margin: 0;
}

#header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 2px solid #e1dfe1;
}

#logo {
  float: left;
  padding-left: 30px;
  padding-top: 15px;
}

#name {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding-top: 25px;
  padding-left: 30px;
}

#name a {
  text-decoration: none;
  color: #666;
}

#headerButtons {
  float: right;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #999;
}

#headerButtons ul {
  margin: 0;
}

#headerButtons li {
  float: right;
  list-style-type: none;
  padding-right: 40px;
  padding-top: 30px
}

#headerButtons a {
  text-decoration: none;
  color: #999;
}

#headerButtons a:hover>li {
  text-decoration: underline;
}

＆＃13;

<div id="header">
  <div id="logo">
    <img src="IMAGES/Logo.svg" width="50px" height="50px">
  </div>
  <div id="name">
    <a href="index.php">
      <p>Project Archive</p>
    </a>
  </div>
  <div id="headerButtons">
    <ul>
      <a href="Login.php">
        <li>Register</li>
      </a>
      <a href="Register.php">
        <li>Login</li>
      </a>
    </ul>
  </div>
</div>

＆＃13;

但根据html规范的正确解决方案是你所有锚点都在li标签内，如下所示。

<div id="header">
  <div id="logo">
    <img src="IMAGES/Logo.svg" width="50px" height="50px">
  </div>
  <div id="name">
    <a href="index.php">
      <p>Project Archive</p>
    </a>
  </div>
  <div id="headerButtons">
    <ul>
      <li>
        <a href="Login.php">
        Register

      </a>
      </li>
      <li>
        <a href="Register.php">
        Login
      </a>
      </li>
    </ul>
  </div>
</div>

这是一个代码段

＆＃13;

body {
  margin: 0;
  background-color: #f6f4fb;
}

p {
  margin: 0;
}

#header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 2px solid #e1dfe1;
}

#logo {
  float: left;
  padding-left: 30px;
  padding-top: 15px;
}

#name {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  padding-top: 25px;
  padding-left: 30px;
}

#name a {
  text-decoration: none;
  color: #666;
}

#headerButtons {
  float: right;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #999;
}

#headerButtons ul {
  margin: 0;
}

#headerButtons li {
  float: right;
  list-style-type: none;
  padding-right: 40px;
  padding-top: 30px
}

#headerButtons a {
  text-decoration: none;
  color: #999;
}

#headerButtons a:hover>li {
  text-decoration: underline;
}

＆＃13;

<div id="header">
  <div id="logo">
    <img src="IMAGES/Logo.svg" width="50px" height="50px">
  </div>
  <div id="name">
    <a href="index.php">
      <p>Project Archive</p>
    </a>
  </div>
  <div id="headerButtons">
    <ul>
      <a href="Login.php">
        <li>Register</li>
      </a>
      <a href="Register.php">
        <li>Login</li>
      </a>
    </ul>
  </div>
</div>

＆＃13;

li标记时悬停不会下划线

2 个答案: