Question

我试图让A标签填充父TD元素。但是，无论我尝试什么，它似乎都不起作用。我查看了许多其他Stack Overflow页面，他们都声明要做

child-element{
    display: block;
    width: 100%;
}

但这似乎不适用于我的情况。

html {
  font-family: "Times New Roman", Times, serif;
  color: white;
}

#wrapper {
  background-color: black;
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}

a {
  color: white;
  text-decoration: none;
  background-color: none;
  cursor: pointer;
}

#wrapper,
#header,
#main {
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
}

#header {
  min-width: 40vw;
  max-width: 50vw;
}

#main {
  min-height: 65vh;
}

.nav-link {
  float: left;
  padding: 10px 15px;
  margin: 0 5px 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.nav-link a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}

<body>
  <div id="wrapper">
    <div id="header">
      <table align="center">
        <td class="nav-link"><a href="/">Main</a></td>
        <td class="nav-link"><a href="/test/">Test</a></td>
        <td class="nav-link"><a href="/faq/">FAQ</a></td>
      </table>
    </div>
    <div id="main">
      <h1 style="line-height: 0%">Header</h1>
      <p style="line-height: 0%; font-size: 1vw">_________________________________________________________________________________________________________</p>
      <br>
      <br>
    </div>
  </div>
</body>

如果您希望看到此内容，可以在此处查看：https://jsfiddle.net/wverhe/8gcypffm/

Answer 1

从.nav-link移除填充并将其添加到.nav-link a。您还可以从链接中删除宽度和高度，因为它们将从填充中调整大小。

＆＃13;

html {
  font-family: "Times New Roman", Times, serif;
  color: white;
}

#wrapper {
  background-color: black;
  background: #50a3a2;
  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}

a {
  color: white;
  text-decoration: none;
  background-color: none;
  cursor: pointer;
}

#wrapper,
#header,
#main {
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
}

#header {
  min-width: 40vw;
  max-width: 50vw;
}

#main {
  min-height: 65vh;
}

.nav-link {
  float: left;
  margin: 0 5px 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.nav-link a {
  display: block;
  padding: 10px 15px;
/*  width: 100%;  */
/*  height: 100%; */
  background-color: rgba(255, 255, 255, 0.3);
}

＆＃13;

<body>
  <div id="wrapper">
    <div id="header">
      <table align="center">
        <td class="nav-link"><a href="/">Main</a></td>
        <td class="nav-link"><a href="/test/">Test</a></td>
        <td class="nav-link"><a href="/faq/">FAQ</a></td>
      </table>
    </div>
    <div id="main">
      <h1 style="line-height: 0%">Header</h1>
      <p style="line-height: 0%; font-size: 1vw">_________________________________________________________________________________________________________</p>
      <br>
      <br>
    </div>
  </div>
</body>

＆＃13;

https://jsfiddle.net/8gcypffm/4/

似乎无法使A标签填充父TD标签

1 个答案: