大佬教程收集整理的这篇文章主要介绍了简单的CSS选项卡 – 需要在活动选项卡上中断边框,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
_____ _____ _____ _|_____|_| |_|_____|______________
因此,在边界框上基本上有一个水平边框,为活动选项卡中断.我正在使用一个基本列表,使用以下CSS,但外部边框总是显示在单个选项卡上.我已经尝试过各种定位和z-index也没有用.
ul.tabHolder { overflow: hidden; clear: both; margin: 1em 0; padding: 0; border-bottom: 1px solid #666; } ul.tabHolder li { list-style: none; float: left; margin: 0 3px -1px; /* -1 margin to move tab down 1px */ padding: 3px 8px; BACkground-color: #444; border: 1px solid #666; font-size: 15px; } ul.tabHolder li.active { BACkground-color: #944; border-bottom: 1px solid #944; }
以下内容复制自网站,以确保答案仍然有效,如果网站关闭,更改或中断.
HTML
<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div>
CSS
#navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana,sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; BACkground: #DDE; text-decoration: none; } #navlist li a:link { color: #448; } #navlist li a:visited { color: #667; } #navlist li a:hover { color: #000; BACkground: #AAE; border-color: #227; } #navlist li a#current { BACkground: white; border-bottom: 1px solid white; }
以上是大佬教程为你收集整理的简单的CSS选项卡 – 需要在活动选项卡上中断边框全部内容,希望文章能够帮你解决简单的CSS选项卡 – 需要在活动选项卡上中断边框所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。