我为列表选项卡设置了边距,但是最后一项也获得了边距。当我的最后一个项目处于活动状态时,背景色不会填充整个空间。
寻求帮助
这是我的代码
<div id="tabcontainer">
<ul class="tabcontentnav">
<li class="tabactive"> <a href="#tab1">For Parents, Patients & Caregivers</a>
</li>
<li> <a href="#tab2">For Researchers</a>
</li>
<li> <a href="#tab3">For Health Care Providers</a>
</li>
<li> <a href="#tab4">For EducatorsFor</a>
</li>
<li> <a href="#tab5">For Small Business</a>
</li>
</ul>
<section id="tab1" class="tab-content tabactive">
<div>Content in tab 1</div>
</section>
<section id="tab2" class="tab-content hide">
<div>Content in tab 2</div>
</section>
<section id="tab3" class="tab-content hide">
<div>Content in tab 3</div>
</section>
<section id="tab4" class="tab-content hide">
<div>Content in tab 4</div>
</section>
<section id="tab5" class="tab-content hide">
<div>Content in tab 5</div>
</section>
css
#tabcontainer {
background: white;
border: 1px solid;
border-radius: 10px;
min-height: 200px;
}
.tabcontentnav {
margin-left: 0;
list-style: none;
max-height: 30px;
padding-left: 0px;
margin-top: 12px;
color:black;
border-bottom: 3px solid #BEDCF2;
padding-bottom: 10px;
}
.tabcontentnav li {
display: inline;
}
.tabcontentnav > li > a {
padding:12px;
margin-right:3px;
color: black;
text-decoration: none;
}
.tabcontentnav > li > a:hover {
background-color: #BEDCF2;
border-radius: 10px 10px 0px 0px;
}
.tabcontentnav > .tabactive > a, .tabcontentnav > .tabactive > a:hover {
color: #555555;
cursor: default;
background-color: #BEDCF2;
border-radius: 10px 10px 0px 0px;
}
.tab-content.tabactive {
display: block;
border-top: 1px solid;
margin-top: -12px;
padding: 10px;
}
.tab-content.hide {
display: none;
}
更多关于此jsfiddle http://jsfiddle.net/5j49quzx/18/
最佳答案
您可以使用:last-child pseudo-class更改最后一个选项卡上的边距:
.tabcontentnav > li:last-child > a {
margin-right: 0;
}
这是your fiddle with the added style。
关于jquery - 从列表中的最后一项删除边距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29976557/