没有文字的Div与Div相比具有不同的对齐方式

Question

以下是fiddle以下内容：

.filterDivActual, #filterSeparator {
  display: inline-block;
}
.filterDivActual {
  border: 2px solid grey;
  width: 15%;
  height: 50px;
  line-height: 50px;
  color: grey;
  position: relative;
}
#filterSeparator {
  height: 50px;
  width: 5px; 
  background-color: black; 
}

<div id='filterDiv'>
  <div class='filterDivActual'>Top</div>
  <div class='filterDivActual'>New</div> 
  <div id='filterSeparator'></div>
  <div class='filterDivActual'>Today</div>
  <div class='filterDivActual'>Yesterday</div>
  <div class='filterDivActual'>None</div>
</div>

我想要的是#filterSeparator与其他div对齐。

出于某种原因，所有其他div都低于#filterSeparator。

如果我将文字放在#filterSeparator内，那么它就可以了。

如果没有在#filterSeparator内放置任何文字，我有没有办法让它工作？

Answer 1

fiddle

对于内嵌 / 内嵌块元素，请使用vertical-align属性：

.filterDivActual, #filterSeperator {
    display: inline-block;
    vertical-align: middle ; /* or some other value: */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

我不知道为什么会这样做，但你可以使用float：left;而不是显示：inline-block

Answer 3

#filterSeparator:before {
   content: ".";
   visibility: hidden;
}

.filterDivActual, #filterSeparator {
  display: inline-block;
}
.filterDivActual {
  border: 2px solid grey;
  width: 15%;
  height: 50px;
 
  color: grey;
  position: relative;
}
#filterSeparator {
  height: 50px;
  width: 5px; 
  background-color: black; 
   
}
#filterSeparator:before {
  content: ".";
  visibility: hidden;
}

<div id='filterDiv'>
  <div class='filterDivActual'>Top</div>
  <div class='filterDivActual'>New</div> 
  <div id='filterSeparator'></div>
  <div class='filterDivActual'>Today</div>
  <div class='filterDivActual'>Yesterday</div>
  <div class='filterDivActual'>None</div>
</div>

Answer 4

将内容置于空<div>将解决此问题。

<div id='filterSeperator'>&nbsp;</div>