html - 如何让 元素填充此表中的 以便每个单元格都是一个链接而不仅仅是文本？

Question

嘿，谁能帮帮我。我正在网站上创建一个表格作为子菜单，但我无法弄清楚如何让 元素填充此表格中的

，以便每个单元格都是一个链接而不仅仅是文本

<ul>
   <li class="list-heading">Important Services</li>
   <li class="red-elem"><a href="#">Home</a></li>
   <li class="red-elem"><a href="#">About</a></li>
   <li class="red-elem"><a href="#">Our Work</a></li>
   <li class="red-elem"><a href="#">Services</a></li>
   <li class="red-elem"><a href="#">Contact</a></li>
</ul>
<style>
.list-heading {
  font-family: Roboto;
  font-weight: 500;
  font-size: 150%;
  padding: 20px;
  background-color: #ac0303;
  color: #FFFFFF;
  border-bottom: 1px black solid;
  margin-bottom: 0px;
}
.red-elem {
  font-family:Roboto;
  font-weight: 100;
  font-size: 150%;
  margin-top: 0px;
  padding: 20px;
  background-color: #ac0303;
  border-bottom: 1px black solid;
}
.red-elem a {
  color: white;
}
</style>

Answer 1

将显示 block 添加到您的a 标记，请参阅下面的更新代码

<ul>
   <li class="list-heading">Important Services</li>
   <li class="red-elem"><a href="#">Home</a></li>
   <li class="red-elem"><a href="#">About</a></li>
   <li class="red-elem"><a href="#">Our Work</a></li>
   <li class="red-elem"><a href="#">Services</a></li>
   <li class="red-elem"><a href="#">Contact</a></li>
</ul>
<style>
.list-heading {
  font-family: Roboto;
  font-weight: 500;
  font-size: 150%;
  padding: 20px;
  background-color: #ac0303;
  color: #FFFFFF;
  border-bottom: 1px black solid;
  margin-bottom: 0px;
}
.red-elem {
  font-family:Roboto;
  font-weight: 100;
  font-size: 150%;
  margin-top: 0px;
  padding: 20px;
  background-color: #ac0303;
  border-bottom: 1px black solid;
}
.red-elem a {
  color: white;
  display:block;
}
</style>