首先,我在 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 上查看这些代码的运行情况。 .
神秘之处在于元素 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/