Question

Hey there can anyone help me out. I am creating a table as a submenu on a website and I am unable to figure out how I can get the < a > element to fill the < li > in this table so that each cell is a link and not just the text

<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

将显示块添加到a tag，请参阅下面的更新代码

＆＃13;

<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>

＆＃13;

Answer 2

.red-elem a {
    display: block;
    height: 100%;
    width: 100%;
}

...并移除li上的填充，然后根据下一个答案添加到<a>：）

Answer 3

从.red-elem中删除填充，然后将其添加到链接

＆＃13;

.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;
  background-color: #ac0303;
  border-bottom: 1px black solid;
}
.red-elem a {
  color: white;
  display:block;
  padding:20px;
}

＆＃13;

<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>

＆＃13;

如何获取<a> element to fill the </a> <li> <a> in this table so that each cell is a link and not just the text?

3 个答案: