使錨點填充父寬度和高度的 100%

Question

我想讓錨點填充父級（.tab）寬度和高度的 100%，所以當您單擊選項卡中的任意位置時，應該就像您完全單擊了錨點一樣。 錨點應保持垂直和水平居中。

 .tabs { font-size: 0; }.tab { background-color: #19222a; color: white; display: inline-block; border: 1px solid #ddd; font-size: 14px; border-bottom: 0; padding: 1em 1.5em; top: 1px; left: 4em; position: relative; max-width: 215px; }.tab a { color: white; text-decoration: none; display: block; }.active { background-color: #206996; color: white; font-weight: bold; } table { border-top: 1px solid #ddd; font-size: 14px; } table tr:nth-child(even) { background-color: #faf7f7; } table tr:nth-child(odd) { background-color: #f0f0f0; } table th { background-color: #206996; color: white; padding: 5px; } table tr td:nth-child(n+4), table tr td:first-child { text-align: center; } table tr td:nth-child(-n+4) { padding: 5px; }

 <div class="tabs"> <div class="tab " id="all"> <a href="?status=all">All tasks</a> </div> <div class="tab " id="running"> <a href="?status=running">Running tasks</a> </div> <div class="tab active " id="completed"> <a href="?status=completed">Completed tasks</a> </div> </div> <div class="table-wrapper"> <table id="running-tasks"> <tr> <th>ID</th> <th>Title</th> <th>Description</th> <th>Priority</th> <th>Done</th> <th>Update</th> </tr> <tr id="row9" class="done"> <td> 9 </td> <td> Learn Django </td> <td> Learn Django for work urgentl… </td> <td> High </td> <td> <input id="9" type="checkbox" name="done"> </td> <td> <a href="/todo/update/9/"><img src="/static/todo/img/edit-16.png"></a> <a href="/todo/delete/9/"><img src="/static/todo/img/delete-16.png"></a> </td> </tr> </table>

我怎樣才能做到這一點？

演示：這里

Answer 1

您應該移動行padding: 1em 1.5em; 從選項卡到其中的錨點，否則選項卡將始終比錨點更寬更高：

 .tabs { font-size: 0; }.tab { background-color: #19222a; color: white; display: inline-block; border: 1px solid #ddd; font-size: 14px; border-bottom: 0; top: 1px; left: 4em; position: relative; max-width: 215px; }.tab a { color: white; text-decoration: none; display: block; padding: 1em 1.5em; }.active { background-color: #206996; color: white; font-weight: bold; } table { border-top: 1px solid #ddd; font-size: 14px; } table tr:nth-child(even) { background-color: #faf7f7; } table tr:nth-child(odd) { background-color: #f0f0f0; } table th { background-color: #206996; color: white; padding: 5px; } table tr td:nth-child(n+4), table tr td:first-child { text-align: center; } table tr td:nth-child(-n+4) { padding: 5px; }

 <div class="tabs"> <div class="tab" id="all"> <a href="?status=all">All tasks</a> </div> <div class="tab" id="running"> <a href="?status=running">Running tasks</a> </div> <div class="tab active" id="completed"> <a href="?status=completed">Completed tasks</a> </div> </div> <div class="table-wrapper"> <table id="running-tasks"> <tr> <th>ID</th> <th>Title</th> <th>Description</th> <th>Priority</th> <th>Done</th> <th>Update</th> </tr> <tr id="row9" class="done"> <td> 9 </td> <td> Learn Django </td> <td> Learn Django for work urgentl… </td> <td> High </td> <td> <input id="9" type="checkbox" name="done"> </td> <td> <a href="/todo/update/9/"><img src="/static/todo/img/edit-16.png"></a> <a href="/todo/delete/9/"><img src="/static/todo/img/delete-16.png"></a> </td> </tr> </table>