设置标签的标签宽度

时间:2013-07-11 14:20:02

标签: html css

我正在搞乱来自CSS Tricks的this代码示例,并且我试图将三个标签宽度设置为容器宽度的33%,以便三个标签均匀地覆盖容器的顶部。我知道您可以使用display:block设置标签的宽度,但标签会开始切入容器。如何在不损坏容器的情况下调整宽度?

1 个答案:

答案 0 :(得分:2)

这是一个解决方案小提琴: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;
}

选项卡上的margin-top将退出选项卡标签上存在的填充/边框。