在它的父表格单元格上拉伸链接

Question

我有一个链接表，看起来像这样：

所以我写了这样的代码：

body, html {
    padding:0px;
    margin: 0px;
    background-color: black;
}
#THR_CHOICE a {
    background-color: lightblue;
    /* to allign text in middle */
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 4pt;
    color: black;
    font-size: 13pt;
    width: 100%;
    height: 100%;
}
#THR_CHOICE {
    text-align: center;
    }
#THR_CHOICE {
    padding: 0px;
    margin: 0px;
    width: 99vw;
    height: 99vh;
    margin-left: auto;
    margin-right: auto;
}

<table id="THR_CHOICE">
        <tr>
            <td><a href="http://www.example.net">ALB</a></td>
            <td><a href="http://www.example.net">HRA</a></td>
        </tr>                   
        <tr>                    
            <td><a href="http://www.example.net">LIS</a></td>
            <td><a href="http://www.example.net">NOS</a></td>
        </tr>                
        <tr>                 
            <td><a href="http://www.example.net">PRE</a></td>
            <td><a href="http://www.example.net">SLV</a></td>
        </tr>             
        <tr>              
            <td><a href="http://www.example.net">SOK</a></td>
            <td></td>
        </tr>
    </table>

如您所见，链接拒绝垂直和水平传播。有什么诀窍？

Answer 1

这是因为您拥有<a>个display: table-cell;标签。显示此元素的元素需要父母display: table;，我相信...而您的<a>有父母（<td>），这是另一个display: table-cell;。

您可以使用display: flex;来实现您的目标：

    display: flex;
    align-items: center;
    justify-content: center;

＆＃13;

＆＃13;

body, html {
    padding:0px;
    margin: 0px;
    background-color: black;
}
#THR_CHOICE a {
    background-color: lightblue;
    /* to allign text in middle */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4pt;
    color: black;
    font-size: 13pt;
    width: 100%;
    height: 100%;
}
#THR_CHOICE {
    text-align: center;
    }
#THR_CHOICE {
    padding: 0px;
    margin: 0px;
    width: 99vw;
    height: 99vh;
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

<table id="THR_CHOICE">
        <tr>
            <td><a href="http://www.example.net">ALB</a></td>
            <td><a href="http://www.example.net">HRA</a></td>
        </tr>                   
        <tr>                    
            <td><a href="http://www.example.net">LIS</a></td>
            <td><a href="http://www.example.net">NOS</a></td>
        </tr>                
        <tr>                 
            <td><a href="http://www.example.net">PRE</a></td>
            <td><a href="http://www.example.net">SLV</a></td>
        </tr>             
        <tr>              
            <td><a href="http://www.example.net">SOK</a></td>
            <td></td>
        </tr>
    </table>

＆＃13;

＆＃13;

＆＃13;

或者，如果您不想使用flex，则必须更改标记...

CSS：

#THR_CHOICE span {
    display: table;
    width: 100%;
    height: 100%;
}

HTML

<td><span><a href="http://www.example.net">ALB</a></span></td>

＆＃13;

＆＃13;

body, html {
    padding:0px;
    margin: 0px;
    background-color: black;
}

#THR_CHOICE span {
display: table;
width: 100%;
height: 100%;
}

#THR_CHOICE a {
    background-color: lightblue;
    /* to allign text in middle */
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border-radius: 4pt;
    color: black;
    font-size: 13pt;
    width: 100%;
    height: 100%;
}
#THR_CHOICE {
    text-align: center;
    }
#THR_CHOICE {
    padding: 0px;
    margin: 0px;
    width: 99vw;
    height: 99vh;
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

<table id="THR_CHOICE">
        <tr>
            <td><span><a href="http://www.example.net">ALB</a></span></td>
            <td><<span>a href="http://www.example.net">HRA</a></span></td>
        </tr>                   
        <tr>                    
            <td><span><a href="http://www.example.net">LIS</a></span></td>
            <td><span><a href="http://www.example.net">NOS</a></span></td>
        </tr>                
        <tr>                 
            <td><span><a href="http://www.example.net">PRE</a></span></td>
            <td><span><a href="http://www.example.net">SLV</a></span></td>
        </tr>             
        <tr>              
            <td><span><a href="http://www.example.net">SOK</a></span></td>
            <td></td>
        </tr>
    </table>

＆＃13;

＆＃13;

＆＃13;