Css 引导选项卡内容上的边框

我想在选项卡内容中添加边框。所选选项卡底部不应有边框。我发现这样的问题：，但答案对我不起作用

HTML:

<ul class="nav nav-tabs pull-right">
    <li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
    <li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
    <div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
 </div>

body, html {
    direction: rtl;
    height: 100%;
    font-family: Tahoma;
}
.nav-tabs {
    direction: ltr;
}
#logo {
    background-color: #005CB8;
    width: 100%;
    color: white;
    padding: 4% 10%;
    -webkit-box-shadow: 20px 10px 20px #003972;
    -moz-box-shadow: 20px 10px 20px #003972;
    box-shadow: 20px 10px 20px #003972;
    border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
    display: inline;
    font-family: head;
}
#logo h1 {
    font-size: 550%;
}
#logo h4 {
    font-size: 220%;
}
.navbar-inverse {
    background-color: #477199;
    font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
    color: white;
}
.nav.navbar-nav li a {
    color: white;
}
.navbar-inverse .navbar-nav > .active {
    background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: white;
    background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    background-color: #324F6B;
    color: white;
}
.category {
    text-align: center;
    margin-top: 1px;
    background-size: 100% 100%;
    padding: 15% 0;
}
.category h1 {
    color: white;
    font-family: head;
    font-size: 500%;
    text-shadow: 2px -2px black;
}
.category_start {
    margin: 0 auto;
    width: 85%;
}
.sub_categories {
    -webkit-columns: auto 3;
    /* Chrome, Safari, Opera */
    -moz-columns: auto 3;
    /* Firefox */
    columns: auto 3;
    list-style-type: disc;
    margin-top: 5px;
}
.category_start .container {
    margin-top: 10px;
}
.product_image {
    height: 80px;
    width: 80px;
}
.products_sub_list {
    margin: 10px auto 0;
    text-align: center;
    max-width: 80%;
    border-radius: 7px;
}
.products_sub_list td {
    width: 15%;
    max-width: 15%;
    padding: 0 5px;
    border: 3px solid #46617A;
}
.product {
    width: 80%;
    border: 3px solid #46617A;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
}
.product_table td {
    border: 2px solid #46617A;
    padding: 13px;
}
.product_table {
    display: inline-table;
    margin-left: 15px;
    margin-bottom: 8px;
}
.product_table td:first-child {
    font-weight: bold;
}
.page {
    width: 85%;
    margin: 0 auto;
    padding: 15px 25px;
    border: 2px solid #46617A;
    border-radius: 10px;
    background-color: #C8D0D7;
}
.register {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.register td {
    padding: 5px;
    text-align: right;
}
.register table {
    margin-right: 240px;
}
#register {
    width: 80%;
    position: absolute;
    z-index: 2;
    display: none;
    left: 0;
    right: 0;
    top: 100px;
    margin: 0 auto;
    border: 3px solid #0066FF;
    background-color: #CCE0FF;
    text-align:center;
    border-radius: 10px;
}
#bbg {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.tab-content {
    border: 1px solid #ddd;
    padding: 1px;
}

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
    <li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
    <div id="category_8" class="tab-pane fade in active category">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
</div>

.tab-content {
    border: 1px solid #ddd;
    border-width: 0 1px 1px; /* Removes the top border */
    padding: 1px;
}
.nav-tabs > li {
    float: right;
}
.nav-tabs > li > a {
    margin-right: 0;
    margin-left: 2px;
}

JSFiddle:

---

请注意，打开的选项卡中有边框，关闭的选项卡也有双边框。

主要问题是

ul

元素上的

向右拉

从
ul
删除
clear fix
元素，因为它不再需要了
从
选项卡内容中删除上边框

向右浮动
li
s
更正选项卡上的页边距
相关HTML:

<ul class="nav nav-tabs pull-right">
    <li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
    <li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
    <div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
 </div>

body, html {
    direction: rtl;
    height: 100%;
    font-family: Tahoma;
}
.nav-tabs {
    direction: ltr;
}
#logo {
    background-color: #005CB8;
    width: 100%;
    color: white;
    padding: 4% 10%;
    -webkit-box-shadow: 20px 10px 20px #003972;
    -moz-box-shadow: 20px 10px 20px #003972;
    box-shadow: 20px 10px 20px #003972;
    border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
    display: inline;
    font-family: head;
}
#logo h1 {
    font-size: 550%;
}
#logo h4 {
    font-size: 220%;
}
.navbar-inverse {
    background-color: #477199;
    font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
    color: white;
}
.nav.navbar-nav li a {
    color: white;
}
.navbar-inverse .navbar-nav > .active {
    background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: white;
    background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    background-color: #324F6B;
    color: white;
}
.category {
    text-align: center;
    margin-top: 1px;
    background-size: 100% 100%;
    padding: 15% 0;
}
.category h1 {
    color: white;
    font-family: head;
    font-size: 500%;
    text-shadow: 2px -2px black;
}
.category_start {
    margin: 0 auto;
    width: 85%;
}
.sub_categories {
    -webkit-columns: auto 3;
    /* Chrome, Safari, Opera */
    -moz-columns: auto 3;
    /* Firefox */
    columns: auto 3;
    list-style-type: disc;
    margin-top: 5px;
}
.category_start .container {
    margin-top: 10px;
}
.product_image {
    height: 80px;
    width: 80px;
}
.products_sub_list {
    margin: 10px auto 0;
    text-align: center;
    max-width: 80%;
    border-radius: 7px;
}
.products_sub_list td {
    width: 15%;
    max-width: 15%;
    padding: 0 5px;
    border: 3px solid #46617A;
}
.product {
    width: 80%;
    border: 3px solid #46617A;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
}
.product_table td {
    border: 2px solid #46617A;
    padding: 13px;
}
.product_table {
    display: inline-table;
    margin-left: 15px;
    margin-bottom: 8px;
}
.product_table td:first-child {
    font-weight: bold;
}
.page {
    width: 85%;
    margin: 0 auto;
    padding: 15px 25px;
    border: 2px solid #46617A;
    border-radius: 10px;
    background-color: #C8D0D7;
}
.register {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.register td {
    padding: 5px;
    text-align: right;
}
.register table {
    margin-right: 240px;
}
#register {
    width: 80%;
    position: absolute;
    z-index: 2;
    display: none;
    left: 0;
    right: 0;
    top: 100px;
    margin: 0 auto;
    border: 3px solid #0066FF;
    background-color: #CCE0FF;
    text-align:center;
    border-radius: 10px;
}
#bbg {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.tab-content {
    border: 1px solid #ddd;
    padding: 1px;
}

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
    <li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
    <div id="category_8" class="tab-pane fade in active category">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
</div>

.tab-content {
    border: 1px solid #ddd;
    border-width: 0 1px 1px; /* Removes the top border */
    padding: 1px;
}
.nav-tabs > li {
    float: right;
}
.nav-tabs > li > a {
    margin-right: 0;
    margin-left: 2px;
}

JSFiddle:

这应该会让你走上正确的轨道。
主要问题是
ul
元素上的
向右拉

从
ul
删除
clear fix
元素，因为它不再需要了
从
选项卡内容中删除上边框

向右浮动
li
s
更正选项卡上的页边距
相关HTML:

<ul class="nav nav-tabs pull-right">
    <li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
    <li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
    <div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
 </div>

body, html {
    direction: rtl;
    height: 100%;
    font-family: Tahoma;
}
.nav-tabs {
    direction: ltr;
}
#logo {
    background-color: #005CB8;
    width: 100%;
    color: white;
    padding: 4% 10%;
    -webkit-box-shadow: 20px 10px 20px #003972;
    -moz-box-shadow: 20px 10px 20px #003972;
    box-shadow: 20px 10px 20px #003972;
    border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
    display: inline;
    font-family: head;
}
#logo h1 {
    font-size: 550%;
}
#logo h4 {
    font-size: 220%;
}
.navbar-inverse {
    background-color: #477199;
    font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
    color: white;
}
.nav.navbar-nav li a {
    color: white;
}
.navbar-inverse .navbar-nav > .active {
    background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: white;
    background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    background-color: #324F6B;
    color: white;
}
.category {
    text-align: center;
    margin-top: 1px;
    background-size: 100% 100%;
    padding: 15% 0;
}
.category h1 {
    color: white;
    font-family: head;
    font-size: 500%;
    text-shadow: 2px -2px black;
}
.category_start {
    margin: 0 auto;
    width: 85%;
}
.sub_categories {
    -webkit-columns: auto 3;
    /* Chrome, Safari, Opera */
    -moz-columns: auto 3;
    /* Firefox */
    columns: auto 3;
    list-style-type: disc;
    margin-top: 5px;
}
.category_start .container {
    margin-top: 10px;
}
.product_image {
    height: 80px;
    width: 80px;
}
.products_sub_list {
    margin: 10px auto 0;
    text-align: center;
    max-width: 80%;
    border-radius: 7px;
}
.products_sub_list td {
    width: 15%;
    max-width: 15%;
    padding: 0 5px;
    border: 3px solid #46617A;
}
.product {
    width: 80%;
    border: 3px solid #46617A;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
}
.product_table td {
    border: 2px solid #46617A;
    padding: 13px;
}
.product_table {
    display: inline-table;
    margin-left: 15px;
    margin-bottom: 8px;
}
.product_table td:first-child {
    font-weight: bold;
}
.page {
    width: 85%;
    margin: 0 auto;
    padding: 15px 25px;
    border: 2px solid #46617A;
    border-radius: 10px;
    background-color: #C8D0D7;
}
.register {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.register td {
    padding: 5px;
    text-align: right;
}
.register table {
    margin-right: 240px;
}
#register {
    width: 80%;
    position: absolute;
    z-index: 2;
    display: none;
    left: 0;
    right: 0;
    top: 100px;
    margin: 0 auto;
    border: 3px solid #0066FF;
    background-color: #CCE0FF;
    text-align:center;
    border-radius: 10px;
}
#bbg {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.tab-content {
    border: 1px solid #ddd;
    padding: 1px;
}

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
    <li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
    <div id="category_8" class="tab-pane fade in active category">
        <h1> קוסמטיקה </h1>
    </div>
    <div id="sub_cats_8" class="tab-pane fade">
        <ul class="sub_categories">
            <li><a href="products.php?act=scat&id=11">איפור</a></li>
        </ul>
    </div>
</div>

.tab-content {
    border: 1px solid #ddd;
    border-width: 0 1px 1px; /* Removes the top border */
    padding: 1px;
}
.nav-tabs > li {
    float: right;
}
.nav-tabs > li > a {
    margin-right: 0;
    margin-left: 2px;
}

JSFiddle:

这将使您走上正确的轨道。
您可以发布您的代码（如果可能，还可以发布一个JSFIDLE），以便我们可以帮助您解决问题。否则，就没有办法知道为什么这个答案（在你发布的Stackoverflow链接中）对你不起作用。好的，我编辑，我粘贴新代码，只需移动链接中的空格。你可以发布你的代码吗（如果可能的话，还有一个JSFIDLE），这样我们就可以帮助你解决问题。否则，没有办法知道为什么这个答案（在你发布的Stackoverflow链接中）对你不起作用。好的，我编辑，我粘贴新代码，只需从linktanks中移动空格，效果很好，告诉我，你从哪里学到这些东西的？因为下一次我想自己做的时候，我看了一下文档，什么都没有there@NatiVaknin请随意将此标记为答案并投票表决。要解决这个问题，确实只有一个先决条件。对CSS如何呈现页面有深刻的理解，特别是浮动、位置和显示属性的变化。很好地理解盒子模型也会有很大的帮助。浏览器中的开发人员控制台是您最好的故障排除工具-学习如何使用它并理解它告诉您的内容。祝你好运。好的，谢谢，我在哪里标记这个作为答案并投票？编辑：我没有投票的名声。顺便说一句，你知道任何关于引导的好文档吗？你提到的网站是官方文档，非常好，但是你也可以从github下载源代码并熟悉一些。tanks，很好，告诉我，你在哪里学的这些东西？因为下一次我想自己做的时候，我看了一下文档，什么都没有there@NatiVaknin请随意将此标记为答案并投票表决。要解决这个问题，确实只有一个先决条件。对CSS如何呈现页面有深刻的理解，特别是浮动、位置和显示属性的变化。很好地理解盒子模型也会有很大的帮助。浏览器中的开发人员控制台是您最好的故障排除工具-学习如何使用它并理解它告诉您的内容。祝你好运。好的，谢谢，我在哪里标记这个作为答案并投票？编辑：我没有投票的名声，顺便问一下，你知道有什么好的引导文档吗？你提到的网站是官方文档，非常好，但是你也可以从github下载源代码，然后熟悉一下。