html - タブのラベル幅の設定

Question

CSS Tricks のこのコード サンプルをいじり、3 つのタブの幅をコンテナーの幅の 33% に設定して、3 つのタブがコンテナーの上部を均等に覆うようにしています。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;
}

タブの margin-top は、タブ ラベルに存在するパディング/境界線を取り消します。