html - "display table-cell"不同标签高度不同

标签 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 > 标签)假定更高的高度(50px)。

此外,带有 div 标签的神秘元素是右对齐的。

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

最佳答案

我想到了解决方案。请使用下面的代码。这是 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>

关于html - "display table-cell"不同标签高度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23378723/

相关文章:

php - 如何将带有产品编号的 URL 字符串转换为产品名称

php - 使用 php 更新/删除表单数据以使用 phpmyadmin 更新数据库

javascript - 将 CSS border-radius % 值动态转换为 px

html - 使用显示 :table-cell 时无法在 div 之间提供空格

CSS:单元格为 "width"和 "height"

html/css 表格在 IE 中被破坏

javascript - <li><p>text</p></li> 上点击事件中的未定义文本

html - 水平滚动条不隐藏 & 背景图像不是 100%

css - 为什么 &lt;textarea&gt; 和 <textfield> 不从正文中获取字体系列和字体大小?

html - 当给出 % 宽度时,表格的主体将总空间减少到 Head 的 col 1 空间