jquery - 删除列表中最后一项的边距

Question

我为列表选项卡设置了边距，但最后一项也有边距。当我的最后一个元素处于事件状态时，背景颜色不会填满整个空间。

寻求帮助

这是我的代码

  <div id="tabcontainer">
<ul class="tabcontentnav">
    <li class="tabactive">  <a href="#tab1">For Parents, Patients &amp 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/

Answer 1

您可以使用 :last-child pseudo-class更改最后一个选项卡上的边距:

.tabcontentnav > li:last-child > a {
  margin-right: 0;
}

这是 your fiddle with the added style .