HTML

<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

css

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul li{
    background-color: gray;
    padding: 10px;
}
ul li:hover{
    background-color: rgb(138, 138, 138);
}
@media screen and (min-width:768px) {
    ul{
        display: flex;
    }
    ul li{
        flex:1;
    }
}

(可縮放視窗測試效果。)

您也可能喜歡這些文章

如何讓CSS HTML Table RWD方法

Table RWD Css-Trick 提供了四種響應式網頁的解決方案,分為:擠壓(Squish)、捲動(Scroll)、摺疊橫列(Collapse...