html - 溢出隐藏移动另一个元素

Question

.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}

.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}

.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
}

<div class='wrap'>

<div class='datewrap'>323232</div>

<div class='btnow'>NOW</div>

</div>

为什么btnow下移了？它应该与datewrap内联。

如果我从 datewrap 中删除 overflow:hidden - 就可以了。

但我需要 datewrap 上的 overflow:hidden。

Answer 1

When you use of overflow:hidden[overflow property evaluating to something other than visible] , the baseline is the bottom edge of the margin-box[insert margin-bottom and see result],so this element for align its baseline with baseline of other element move up a bit.

修复使用vertical-align: top;，如下所示:

.btnow {
  vertical-align: top;
  //Other css
}

.wrap{
position:fixed;
left:0; top:45px;
width:100%;
text-align:center;
background:gold;
}

.datewrap{
display:inline-block;
margin:0 5px;
border:2px solid red;
overflow:hidden;
}

.btnow{
display:inline-block;
background:green;
color:white;
margin:0 5px;
border:2px solid red;
vertical-align: top;
}

<div class='wrap'>

<div class='datewrap'>323232</div>

<div class='btnow'>NOW</div>

</div>