怎么写横向导航用css

2025-05-09 22:31:57

1、首先先定义html，如下：<!DOCTYPE html><html> <head> &造婷用痃lt;meta charset="UTF-8"> <title>横向导航栏</title> </head> <body> <div class="container"> <ul class="tab_nav"> <li class="tab_item">导航A</li> <li class="tab_item">导航B</li> <li class="tab_item">导航C</li> <li class="tab_item">导航D</li> </ul> </div> </body></html>写完如图所示

2、那么横向怎么弄呢，一般简单用float即可，看代码 .tab_item{ float: left; padding: 5px; border:1px solid #CCCCCC; margin-left: -1px; }

3、这时候一个横向的导航鲥鲣剔墟栏就写好了全部代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>横向导航栏</title> <style> .tab_item{ float: left; padding: 5px; border:1px solid #CCCCCC; margin-left: -1px; } </style> </head> <body> <div class="container"> <div class="tab_nav"> <div class="tab_item">导航A</div> <div class="tab_item">导航B</div> <div class="tab_item">导航C</div> <div class="tab_item">导航D</div> </div> </div> </body></html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。