CSS核心（三十六）使用无序列表和float浮动实现导航条

人亦已歌 · 发表于 2023-2-1 12:36:46

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用无序列表和float浮动实现导航条</title>
</head>
<style>
        ul{
                /* 清除无序列表的默认样式 */
                list-style:none;
                padding:0;
                margin:0;        
        }
        li{
                background:#abcdef;
                width:120px;        
                height:50px;
                /* 文字垂直居中 */
                line-height: 50px;
                /* 文字水平居中 */
                text-align: center;
                /* 左浮动 */
                float:left;
                /* 外边距 */
                margin-right:10px;
        }
</style>
<body>
<ul>
        <li><a href="https://www.teamczyx.com">首页</a></li>
        <li><a href="https://www.teamczyx.com">慈众易博V9</a></li>
        <li><a href="https://www.teamczyx.com">官方教程</a></li>
        <li><a href="https://www.teamczyx.com">营销技巧</a></li>
        <li><a href="https://www.teamczyx.com">网络推广工具</a></li>
</ul>
</body>
</html>