溢出隐藏移动另一个元素

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内联。

如果我从overflow:hidden中删除了datewrap-没关系。

但是我需要overflow:hidden上的datewrap。

Answer 1

  

使用overflow:hidden [溢出属性评估为可见以外的东西]时，基线是margin-box的底边[插入margin-bottom并查看结果]，因此此元素用于对齐基线与其他元素的基线向上移一点。

像这样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>

Answer 2

text-align实际上不应该用于放置元素。有更好的方法可以实现这一目标。

我不知道为什么overflow导致它“摇摇欲坠”，但是下面是一些解决此问题的代码。

.wrap{
  display: flex;
  justify-content: center;
  /* and if you want to make sure the elements are always aligned vertically */
  align-items: center;
  /* remember: justify-content will always control the same direction as the flex
  ** box; so, if the flex box is a row, justify-content will control the horizontal
  ** spacing and align-items will control the vertical spacing, but if the flex box
  ** is a column justify-content will control the vertical and align-items will
  ** control the horizontal. */
  

  width: 100%;
  position: fixed;
  top: 45px;
  left: 0;
  background: gold;
}

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

.datewrap{
  overflow: hidden;
}

.btnow{
  color: white;
  background: green;
}

<div class='wrap'>

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

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

</div>

Answer 3

vertical-align CSS属性指定嵌入式或表格单元格框的垂直对齐方式。

参考链接： https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

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

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

.datewrap {
  overflow: hidden;
  vertical-align: bottom
}

.btnow {
  color: white;
}

<div class='wrap'>

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

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

</div>

注意： 如果要实时编写代码，则需要最小化CSS。

Answer 4

.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;
position:inherit; 
}

<div class='wrap'>

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

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

</div>