如何使内联块继承高度？

Question

如何让文章标题p元素与片段div具有相同的高度？ p和div都是内联块元素。

我为height: inherit尝试了p，但它不起作用，因为li没有明确的高度值。任何的想法？？

const dataRow = dataArray.map(row => {
  return (
    <li key={row.title}>
      <p className="title col-md-2">{row.title}</p>
      <div className="content__div col-md-10">
        <a href={row.link} className="content">{row.content}</a>
      </div>
    </li>
  );
});


ul {
  li {
    list-style-type: none;
  }

  .title {
    display: inline-block;
    background: $title-bg;
    color: $content-bg;
    height: inherit;
    margin: 0;
    text-align: right;
    vertical-align: middle;
  }

  .content__div {
    display: inline-block;
    margin: 1px 0 1px 0;
    padding: 0;
  }

  .content {
    display: inline-block;
    background: $content-bg;
    color: $title-bg;
    text-decoration: none;
    padding: 10px 15px 10px 15px;
  }
}

Answer 1

将此添加到您的样式表

li {
 display:flex
}

在父li上显示flex会自动将其子高度拉伸（匹配）到最高元素

Answer 2

您可以在li元素上使用flex来使p填充高度。

li {
 display: flex;
}

因为你在div周围有一个边距，所以会有一个视觉上的尺寸差异。删除它会刷新p和div元素。

.content__div {
 ...
  margin: 0px;
 ...
}

看起来您可能正在使用bootstrap作为网格。混合内联块和flex可能不会像您期望的那样填充行。如果您不想改变结构，可以将flex：1添加到div。

.content__div {
 ...
  flex: 1;
 ...
}

示例：https://plnkr.co/edit/x9DdxX?p=preview