CSS - 垂直导向标签

晚上好！
此刻我有一个水平方向的选项卡。另外，我希望在同一个标签内容的右侧有一些垂直方向的标签。CSS - 垂直导向标签

我可以将< 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); 

}

来源

2014-09-27 Sepi

喜欢[此]（http://jsfiddle.net/4L08bd76/）？ – 2014-09-27 18:27:40

好吧，不！ CV和Prosjekter标签应放置在标签内容框的右侧。 – Sepi 2014-09-27 18:30:47

或像这样http://jsfiddle.net/victor_007/4L08bd76/3/ – 2014-09-27 18:36:30

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); 
}

下面是工作演示完整码。

/*----- 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); 
 
}

<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>

来源

2014-09-27 18:37:39

其实我是这样想的： http://pastebin.com/2KfDhx0N 对不起，如果我混淆你了！ – Sepi 2014-09-27 19:38:19

@Sepi：没必要说抱歉。我更新了代码及其工作，您可以查看它。如果这是你需要的，请给它回答。 – 2014-09-28 16:45:08

CSS - 垂直导向标签

回答

相关问题