html - 设置标签的标签宽度

Question

我弄乱了CSS Tricks 中的这个代码示例，并试图将三个选项卡的宽度设置为容器宽度的 33%，以便三个选项卡均匀地覆盖容器的顶部。我知道您可以使用 display:block 设置标签的宽度，但标签随后开始切入容器。如何在不损坏容器的情况下调整宽度？

Answer 1

这是一个解决方案小提琴：http: //jsfiddle.net/qEwef/

本质上：

.tab {
  float: left;
  width:33%;
  display:block;
  margin-top:-12px;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
  display:block;
}

选项卡上的边距顶部将退出选项卡标签上存在的填充/边框。