变化<input>字体大小基于父文本标签

Question

我正在写一个“自然语言”的形式像this one，所以我包括<input>标签直接在这样的文字：

<h3>I am <input type="number" /> years old.</h3 

我想知道是否有一种简单的方法可以将此输入的字体大小设置为与文本相同（在本例中为h3）？这样我可以将它包含在h1，h2等内，而不用担心字体大小。

主要原因是我使用Bootstrap作为我的排版，并且它做了很多魔术，我想自动应用于我的输入。

Answer 1

您可以使用font-size:inherit;使字体大小匹配它的父级。

HTML

<h3>I am <input class="inherit" type="number" /> years old.</h3> 

CSS

.inherit { 
    font-size: inherit; 
} 

这里是它在行动小提琴：https://jsfiddle.net/uyxr7zm0/