Question

晚上好！目前我有一个水平定向标签。另外，我希望在同一个标签内容的右侧有一些垂直方向的标签。

我能够转向＆lt; li>方向，但无法在选项卡内容的右侧将新选项卡对齐。

到目前为止，这是我的代码：

HTML：

<div class="tabs">
      <ul class="tab-links">
          <li class="active"><a href="#About">About</a></li>
          <li><a href="#Video">Video</a></li>
          <li><a href="#Media">Media</a></li>
          <li><a href="#Contact">Contact</a></li>
          <li id="rotate"><a href="#CV">CV</a></li>
          <li id="rotate"><a href="#Pro">Prosjekter</a></li>
      </ul> 
    <div class="tab-content">
        <div id="About" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="Video" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="Media" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>

        <div id="Contact" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="CV" class="tab">
            <p>Tab #5 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

         <div id="Pro" class="tab">
            <p>Tab #6 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>          



    </div> <!-- End content-body -->

CSS：

/*----- Tabs -----*/
.tabs {
    display:inline-block;
    position: absolute;
    width:475px;
    margin-left: 20px;
    float:right;

}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display:inline-block;
    content:'';
}

.tab-links li {
    margin:-5px 7px;
    float:left;
    list-style:none;

}

    .tab-links a {
        padding:9px 15px;
        margin-top: -15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#df8b67;
        font-size:18px;
        font-weight:bold;
        color:#fff;
        text-decoration: none;
        /*font-family: MoviePoster;*/
    }

    .tab-links a:hover {
        background:#d25a26;
        text-decoration:none;
        text-decoration: none;
    }

li.active a, li.active a:hover {
    background:#d25a26;
    color:#fff;
}

    /*----- Tab right -----*/
/* Clearfix */
.tab-link-right:after {
    display:inline-block;
    content:'';
}



.tab-links-right li {
    margin:-5px 7px;
    float:left;
    list-style:none;
    display: inline;
}

    .tab-links-right a {
        padding:9px 15px;
        margin-top: -15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#df8b67;
        font-size:18px;
        font-weight:bold;
        color:#fff;
        text-decoration: none;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);  
        /*font-family: MoviePoster;*/
    }

    .tab-links-right a:hover {
        background:#d25a26;
        text-decoration:none;
        text-decoration: none;
    }

li.active a, li.active a:hover {
    background:#d25a26;
    color:#fff;
}

/*----- Content of Tabs -----*/
.tab-content {
    margin-top: -14px;
    padding:20px;
    border-radius:3px;
    background:#fff;
    border-style: solid;
    border-color: #d25a26;
    height:447px;

    -moz-box-shadow: 5px 5px 2.5px #888;
    -webkit-box-shadow: 5px 5px 2.5px #888;
    box-shadow: 5px 5px 2.5px #888;
}

    .tab {
        display:none;
    }

    .tab.active {
        display:block;
    }

#rotate {

/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Answer 1

在OP的评论后更新

首先，您错过了tabs div的结束标记。其次，您无法为两个元素分配相同的ID rotate。我为旋转元素分别提供了Ids，他们给了他们以下CSS替换你的rotate课程。并且没有改变CSS中的任何其他内容

像这样分配Ids：

<li id="verOne"><a href="#CV">CV</a></li>
<li id="verTwo"><a href="#Pro">Prosjekter</a></li>

和 CSS：

li#verTwo {
position: absolute;
left: 450px;
top: 80px;
/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

li#verOne {
position: absolute;
left: 478px;
top: 185px;
/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

以下是完整代码的工作演示。

＆＃13;

/*----- Tabs -----*/
.tabs {
    display:inline-block;
    position: absolute;
    width:475px;
    margin-left: 20px;
    float:right;

}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display:inline-block;
    content:'';
}

.tab-links li {
    margin:-5px 7px;
    float:left;
    list-style:none;

}

    .tab-links a {
        padding:9px 15px;
        margin-top: -15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#df8b67;
        font-size:18px;
        font-weight:bold;
        color:#fff;
        text-decoration: none;
        /*font-family: MoviePoster;*/
    }

    .tab-links a:hover {
        background:#d25a26;
        text-decoration:none;
        text-decoration: none;
    }

li.active a, li.active a:hover {
    background:#d25a26;
    color:#fff;
}

    /*----- Tab right -----*/
/* Clearfix */
.tab-link-right:after {
    display:inline-block;
    content:'';
}



.tab-links-right li {
    margin:-5px 7px;
    float:left;
    list-style:none;
    display: inline;
}

    .tab-links-right a {
        padding:9px 15px;
        margin-top: -15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#df8b67;
        font-size:18px;
        font-weight:bold;
        color:#fff;
        text-decoration: none;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);  
        /*font-family: MoviePoster;*/
    }

    .tab-links-right a:hover {
        background:#d25a26;
        text-decoration:none;
        text-decoration: none;
    }

li.active a, li.active a:hover {
    background:#d25a26;
    color:#fff;
}

/*----- Content of Tabs -----*/
.tab-content {
    margin-top: -14px;
    padding:20px;
    border-radius:3px;
    background:#fff;
    border-style: solid;
    border-color: #d25a26;
    height:447px;

    -moz-box-shadow: 5px 5px 2.5px #888;
    -webkit-box-shadow: 5px 5px 2.5px #888;
    box-shadow: 5px 5px 2.5px #888;
}

    .tab {
        display:none;
    }

    .tab.active {
        display:block;
    }

li#verTwo {
position: absolute;
left: 450px;
top: 80px;
/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

li#verOne {
position: absolute;
left: 478px;
top: 185px;
/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

＆＃13;

<div class="tabs">
      <ul class="tab-links">
          <li class="active"><a href="#About">About</a></li>
          <li><a href="#Video">Video</a></li>
          <li><a href="#Media">Media</a></li>
          <li><a href="#Contact">Contact</a></li>
          <li id="verOne"><a href="#CV">CV</a></li>
          <li id="verTwo"><a href="#Pro">Prosjekter</a></li>
      </ul> 
    <div class="tab-content">
        <div id="About" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="Video" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="Media" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>

        <div id="Contact" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="CV" class="tab">
            <p>Tab #5 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

         <div id="Pro" class="tab">
            <p>Tab #6 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>          



    </div> <!-- End content-body -->
    </div>

＆＃13;

CSS - 面向垂直的选项卡

1 个答案: