似乎無法使A標記填充父TD標記

我正在嘗試使A標記填充父TD元素。但是，無論我嘗試什麼，似乎都不起作用。我看了不少其他各種堆棧溢出的頁面，他們所有的狀態做似乎無法使A標記填充父TD標記

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

但是這並沒有看起來在我的情況下工作。

HTML

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

CSS

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); 
}

如果你想看到這個顯示，您可以查看這裏：https://jsfiddle.net/wverhe/8gcypffm/

來源

2017-08-28 Antonio Gaspari

從.nav-link取出填充，並將其添加到.nav-link a。您也可以從鏈接中移除寬度和高度，因爲它們將從填充中調整大小。

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

來源

2017-08-28 21:58:51 Ibrahim

謝謝！我試過這個，但忘了去除寬度和高度。 –

似乎無法使A標記填充父TD標記

回答

相關問題