今天我们来学习一下如何在CSS中将导航条放在一行。首先,我们需要在HTML中创建一个导航条的容器,并将每个导航项用单独的标签包裹起来。然后,我们可以使用CSS的display属性和float属性来实现
css .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar a:hover { background-color: #ddd; color: black; } .navbar a.active { background-color: #4CAF50; color: white; }
html <div class="navbar"> <a class="active" href="#home">首页</a> <a href="#news">新闻</a> <a href="#contact">联系我们</a> <a href="#about">关于我们</a> </div>
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。
发帖
与我相关
我的任务
分享
暂无管理员
评论: css中如何放在一行将导航条
粉丝
0
关注
收藏