"显示table-cell"在不同的标签上有不同的高度

时间:2014-04-30 02:36:09

标签: html css css-tables

首先,我在 Mac 上使用 Google Chrome 34

这是 HTML ,一切似乎都是正确的:

<div class="toolbar">
  <button type="button" class="item">Item 1</button>
  <button type="button" class="item">Item 2</button>

  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

这是我的 CSS ...(好吧,它的 SCSS ):

.toolbar {
  border: 1px solid #000;
  border-width: 1px 0;
  display: table;
  width: 100%;

  .item {
    background: transparent;
    border: 1px solid #000;
    border-width: 0 1px 0 0;
    display: table-cell;
    height: 40px;   /* <---------- */
    outline: none;
    vertical-align: center;
    white-space: nowrap;

    &:last-child { border-right: 0; }
  }
}

您可以在http://codepen.io/caio/pen/yFzvK上查看这些代码。

CodePen

神秘之处在于第1项和第2项(button标签)假设正确的高度(40px),但第3项和第4项(div标签)假设更高的高度({ {1}})。

此外,带有50px标签的神秘元素是正确对齐的。

你能帮我理解为什么会这样吗?我该如何解决?

1 个答案:

答案 0 :(得分:2)

我提出了解决方案。请使用以下代码。这是JSFiddle试用

<强> SCSS

body { 
  padding: 50px; 
}

.toolbar {
  border: 1px solid #000;
  border-width: 1px 0;
  display: table;
  width: 100%;
  button,div{-moz-box-sizing: border-box;}

  .item {
    background: transparent;
    border: 1px solid #000;
    border-width: 0 1px 0 0;
    display: table-cell;
    vertical-align: center;
    white-space: nowrap;

    &:last-child { border-right: 0; }

    button{
     height:40px;
     outline: none;
     padding:0;
     margin:0;
     width:100%;

    }
  }

}

<强> HTML

<div class="toolbar">
  <div class="item"><button type="button">Item 1</button></div>
  <div class="item"><button type="button">Item 2</button></div>

  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>