所以我真的不知道如何用语言来解释这个。但这就是我想要实现的目标
这就是我到目前为止所做的link
ul.quicktabs-tabs li {
float: left;
height: 20px;
margin: 0;
margin-right:-20px;
padding: 0;
width:150px;
background: transparent;
}
ul.quicktabs-tabs li a {
font-family: inherit;
margin: 0;
display: block;
padding: 10px 27px 10px 7px;
text-decoration: none;
color: #6da648 !important;
border: 2px solid #6da648;
border-radius: 6px;
margin: 0;
background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
color: #fff !important;
background-position: right -20px;
background: #6da648;
}
ul.quicktabs-tabs {
margin: 0 0 10px 0;
font-size: 11px;
list-style: none;
padding: 1px 23px 23px 0;
}
<ul class="quicktabs-tabs">
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
最佳答案
<li>
右边的元素与 <li>
重叠左边的元素。设置z-index
和 position
类 active
的元素为防止重叠,请调整一些填充和边距。
ul.quicktabs-tabs li {
float: left;
height: 20px;
margin: 0;
margin-right:-8px;
padding: 0;
width:150px;
background: transparent;
}
ul.quicktabs-tabs li a {
font-family: inherit;
margin: 0;
display: block;
padding: 10px 27px 10px 12px;
text-decoration: none;
color: #6da648 !important;
border: 2px solid #6da648;
border-radius: 6px;
margin: 0;
background:#fff;
}
ul.quicktabs-tabs li.active a, ul.quicktabs-tabs li.active a:hover {
color: #fff !important;
background-position: right -20px;
background: #6da648;
z-index: 1000;
position: relative;
}
ul.quicktabs-tabs {
margin: 0 0 10px 0;
font-size: 11px;
list-style: none;
padding: 1px 23px 23px 0;
}
<ul class="quicktabs-tabs">
<li><a href="#">Item 0</a></li>
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
关于html - 使列表项以特定方式相互重叠(顺序),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26088232/