空时如何使内联元素占用空间? [英] How do I make an inline element take up space when empty?

问题描述

我有一个h1和h3标签，可以使用Theater.js擦除自身并输入文字.问题在于，当它擦除自身为空时，它所在的div的高度会变小，然后在再次包含内容时会变大.

I have an h1 and h3 tag that will erase itself and type, using theater.js. The problem is that when it erases itself to empty, the height of the div it's in get smaller, then snaps bigger when it has content again.

我想使h1和h3标签(或完全更改标签)即使在空的情况下也保持其高度.

I want to make the h1 and h3 tag (or change the tag completely) keep its height even while empty.

有什么主意吗?

推荐答案

只需将您的h2/h3标签用display: inline-block;包裹在div中，如下所示:

Just wrap your h2/h3 tag in a div with display: inline-block; like this:

<div class="header2"><h2>ABCD</h2></div>

，然后将其添加到您的CSS中:

and then add this to your css:

    .header2 {
      min-width: 100px;
      width: auto;
      min-height:45px;
      background-color:#333;
      color:#FFF;
      display:inline-block;
      padding:10px;
    }

这是两个具有上述属性的h2标签的jsfiddle: https://jsfiddle.net/AndrewL32 /e0d8my79/21/

Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/

这篇关于空时如何使内联元素占用空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！