我正在尝试创建一个基本门户，其选项卡位于左侧，而不是顶部。理想情况下，我想在没有任何 javascript 的情况下完成此操作；仅使用 HTML5 和 CSS3。

我一直在使用以下水平制表符代码:http://jsfiddle.net/Juggler/9Ue9j/2/

<div id="page-wrap">
    <div class="tabs">
        <div class="tab">
            <input type="radio" id="tab-1" name="tab-group-1" checked>
            <label for="tab-1">Tab One</label>
            <div class="content">
                <p>Stuff for Tab One</p>
            </div> 
        </div>
        <div class="tab">
            <input type="radio" id="tab-2" name="tab-group-1">
            <label for="tab-2">Tab Two</label>
            <div class="content">
                <p>Stuff for Tab Two</p>
            </div> 
        </div>
        <div class="tab">
            <input type="radio" id="tab-3" name="tab-group-1">
            <label for="tab-3">Tab Three</label>
            <div class="content">
                <p>Stuff for Tab Three</p>
            </div> 
        </div>
    </div>
</div>

和

* {
  margin: 0;
  padding: 0;
}
body {
    background: #999;  
}
#page-wrap {
  width: 1024px; 
  height: 768px;
}
    .tabs {
      position: relative;   
      min-height: 200px; /* This part sucks */
      clear: both;
      margin: 25px 0;      
    }
    .tab {
      float: left;      
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px;             
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc;       
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }

我正在尝试 -webkit-transform:rotate(-90deg);但未能捕捉到正确的元素。希望有人能帮助我指明正确的方向。

最佳答案

Working DEMO

调整了 content 和 label 的一些 CSS

* {
  margin: 0;
  padding: 0;
}
body {
    background: #999;  
}
#page-wrap {
  width: 1024px; 
  height: 768px;
}
    .tabs {
      position: relative;   
      min-height: 200px; /* This part sucks */
      clear: both;
      margin: 25px 0;      
    }
    .tab {
      /*float: left; */     
       height: 41px; 
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px;        
      width: 70px;
      display: block;
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 0px;
      left: 92px;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc;       
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }

关于html - 将水平制表符转换为垂直制表符(仅限 HTML 和 CSS，无 js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19096310/