它实际上是简单的退出,它看起来很愚蠢,我无法弄清楚如何做到这一点。我试过浮动:左,显示:内联块,宽度和高度,边距和填充。似乎没什么用。直到昨晚,现在的问题是如何让“(常见问题)”脱离“常见问题”?我已尝试过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;
}
答案 0 :(得分:0)
从此课程.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;
}
答案 1 :(得分:0)
使用以下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;
}
答案 2 :(得分:0)
在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。
答案 3 :(得分:0)
<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;
}
答案 4 :(得分:0)
您可以/应该尝试定位绝对/相对:
#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;