First of all, I'm using Google Chrome 34 on Mac.
This is the HTML, everything seems right:
<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>
And this is my CSS... (ok, it's 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; }
}
}
You can see these codes in action on http://codepen.io/caio/pen/yFzvK.
The mystery is that Item 1 and 2 (button
tag) assume the correct height (40px
), but items 3 and 4 (div
tag) assume a greater height (50px
).
Moreover, mysteriously elements with div
tag are right aligned.
Can you help me understand why this happens? And how can I fix it?
I came up with the solution. Please use below code. Here is JSFiddle Trial
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With