html - 2 种类型的文本在同一行

Question

它实际上很简单，而且看起来很愚蠢，我不知道该怎么做。我试过 float:left、display:inline-block、宽度和高度、边距和填充。似乎没有任何效果。直到昨晚，现在的问题是如何让“(常见问题)”从“常见问题解答”中移开？我试过 margin-right 甚至 padding-right

HTML:

<div id="faq-text">
<h2 class="h2-faq">FAQ<p class="faq-ptag">(Frequently Asked Questions)</p>
</h2>

CSS:

#faq-text{
    width:900px;
    height:50px;
    display:inline-block;
}

.faq-ptag{
    font-size:20px;
    width:300px;
    display:inline-block;
}

.h2-faq{
    font-size:40px;
    font-weight:bold;
}

Answer 1

使用下面的 css 在下一行设置(常见问题)。

#faq-text{
    width:900px;
    height:50px;
    display:inline-block;
}

.faq-ptag{
    font-size:20px;
    width:100%;
    display:inline-block;
    float:left;
}

.h2-faq{
    font-size:40px;
    font-weight:bold;
    width:100%;
    float:left;
}

并使用下面的代码创建一些 gap b/w FAQ 和(常见问题)

#faq-text{
    width:900px;
    height:50px;
    display:inline-block;
}

.faq-ptag{
    font-size:20px;
    width:auto;
    display:inline-block;
    margin-left:100px;
}

.h2-faq{
    font-size:40px;
    font-weight:bold;
    float:left;

}