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。

Answer 2

你正在寻找Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://upload-dev.artsquare.com/w%2Fv_vangogh%2FfaCgY2vR1KnYyTgicwZxCt%2FVincent_van_Gogh_-_De_slaapkamer_-_Google_Art_Project.jpg?partNumber=3&uploadId=P_r2TsqKpH1vZOYWa.w2hiGYrrdK8goX1KVWFz6DD29lLEcVpMmEeXQpoQj2XUzWN_ko4vw3_6Nicqosv6TLZgD1bzsIB5cnk5xMkBz_4fqziJn3gVmZLb4WKv9tEJx7. This can be fixed by moving the resource to the same domain or enabling CORS. w%2Fv_vangogh%2FfaCgY2vR1KnYyTgicwZxCt%2FVincent_van_Gogh_-_De_slaapkamer_-_Google_Art_Project.jpg no element found faCgY2vR1KnYyTgicwZxCt:1:1 "[Fine Uploader 5.0.9] Received response status 0 with body: " s3.jquery.fineuploader.min.js:16:1895 "[Fine Uploader 5.0.9] Chunked upload request failed for 0, chunk 2" s3.jquery.fineuploader.min.js:16:1895 "[Fine Uploader 5.0.9] Waiting 5 seconds before retrying Vincent_van_Gogh_-_De_slaapkamer_-_Google_Art_Project.jpg..." s3.jquery.fineuploader.min.js:16:1895 "[Fine Uploader 5.0.9] Parsing template" s3.jquery.fineuploader.min.js:16:1895 "[Fine Uploader 5.0.9] Template parsing complete" s3.jquery.fineuploader.min.js:16:1895 "[Fine Uploader 5.0.9] Rendering template in DOM." s3.jquery.fineuploader.min.js:16:1895 "[Fine Uploader 5.0.9] Template rendering complete" s3.jquery.fineuploader.min.js:16:1895伪类。这是一个更新的小提琴：http://jsfiddle.net/5j49quzx/19/

这些天来，

:last-child得到普遍支持：http://caniuse.com/#search=last-child

在您的情况下，您需要定位最后:last-child元素内的<a>元素：

<li>

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

2 个答案: