Question

它实际上是简单的退出，它看起来很愚蠢，我无法弄清楚如何做到这一点。我试过浮动：左，显示：内联块，宽度和高度，边距和填充。似乎没什么用。直到昨晚，现在的问题是如何让“（常见问题）”脱离“常见问题”？我已尝试过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

从此课程.faq-ptag中删除固定宽度： Demo

此演示会将Frequently Asked Questions文字与右侧对齐

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

更新：您可以根据需要提供margin-left值： Demo

CSS：

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

Answer 2

使用以下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;
}

并使用以下代码创建一些差距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;

}

Answer 3

在margin-left上添加.faq-ptag有效。

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

如果您在.h2-faq上添加保证金或填充，则无效。您可以.h2-faq {display:inline-block}然后移出.faq-ptag并在margin-right上添加.h2-faq。

这是example。

Answer 4

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

在css中如下编辑：

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

Answer 5

您可以/应该尝试定位绝对/相对：

＆＃13;

#faq-text {
  position: relative;
}
.h2-faq {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}
.faq-ptag {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
}

＆＃13;

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

＆＃13;

同一行上有2种类型的文本

5 个答案: