Question

我有一个可以内联使用的下拉窗口小部件，但是当它打开时，它似乎降低了文本基线。我本以为小部件的孩子不会影响布局。

通过一些实验，我发现div中是否有文本很重要，所以下面的例子中有两个小部件。

var divs = document.querySelectorAll('div div');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', function() {
    this.classList.toggle('high')
  });
}

div {
  background-color: #ddf;
  width: 150px;
  height: 20px;
  overflow: visible;
  display: inline-block;
}
.third {
display: block;  
}
.high {
  height: 100px;
}

<div>
  <div></div>
</div>
<div>
  <div>Text</div>
</div>
<div>
  <div class="third"></div>
</div>Text

如果没有实际文本，似乎内部div被视为文本。有没有办法消除这种行为？

我只能更改div而不是后面的内容，所以我对一个允许我让父div单独确定基线的解决方案感兴趣。

编辑：不让孩子display: inline-block似乎也有效。这似乎证实了内容被视为重要的“文本”。我还是想知道原因。

Answer 1

这可以解决您的问题。我只在float: left添加了<div> 's。这是小提琴<http://jsfiddle.net/zlajaa1/ffebcww0/>

子元素移动基线

1 个答案: