换行后<br> <p>内的<p>内的文本将忽略<p>标记的css（如果还存在标题）
君士坦丁
我的目标是使标题与<p>标签内的文本内联...所有这些都margin与容器的填充物有关
我有以下html代码
<div id='homeContent'>
<!-- other headings and content here -->
<p><h3>Heading</h3> some text</br> more text</p>
<!-- other headings and content here -->
</div>
使用以下CSS
#homeContent h3, #homeContent h4, #homeContent p {
z-index: 0;
margin: 0px 16px;
padding-top: 8px;
}
#homeContent h3, #homeContent h4 {
display: inline;
}
#homeContent {
padding: 0px 16px;
margin: 32px 0px;
}
这就是我要发生的事情（考虑将代码块作为容器的边界）
H3 HEADING some text
more text here
这是我实际上得到的
H3 HEADING some text
more text here <-- notice here the text does not respect the margin given to the <p> tag
现在，如果我从段落标记中删除标题标记，则段落文本的行为正确，但显然不会与标题内联，这就是目标。
Praveen Kumar Purushothaman
首先，标记中不能包含任何块级元素<p>。即使您的代码具有：
<p><h3>Heading</h3> some text</br> more text</p>
它在浏览器中呈现如下：
因此，最好使用正确的代码，例如：
<h3>Heading</h3>
<p> some text</br> more text</p>
并使用CSS设置样式。
段落和标题是两种不同的动物。根据您在评论中的需要，我建议使用此标记：
h3 {color: red;}
h3 span {font-weight: normal; font-size: 0.8em;}<h3>Heading <span>some text</br> more text</span></h3>并进一步您的意见，我可以找到你想要让你<h3>和<p>在线运行的内容。我建议保留上面的标记并使用以下CSS：
h3, h3 + p {display: inline-block; /* Or inline */}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
树枝不接受<p>内的<p>
- 2
使用BeautifulSoup删除<p>标记内的空白
- 3
Angular-在<p>标记内渲染HTML
- 4
</ p>标记后没有自动换行符？
- 5
在<div>内的<p>内将按钮居中
- 6
bs4如何提取<p>标记内的文本
- 7
如何在<p>标记内的文本垂直居中？
- 8
我想在<p> </ p>标记内呈现我的输入文本值
- 9
在<p> </ p>字段后显示更多文本
- 10
CSS-<p>内的双精度<img>
- 11
如何将P元素内的文本放在图像旁边？
- 12
<div>内<p>文本的垂直对齐
- 13
<p>段落内的HTML标签
- 14
next（）在<p>元素内失败
- 15
将“ p”放在“ a”内是否正确？
- 16
将“ p”放在“ a”内是否正确？
- 17
将段落元素放在HTML5的标题标记内（H1内的P）是否有效？
- 18
将标签p替换为Blockquote中的br
- 19
<p>标记内的值更改时调用函数
- 20
如何在<p>内右对齐<span>并使<p>内的文本居中？（HTML）
- 21
如何在按Enter键时将<p> </ p>标签更改为<br>标签
- 22
删除PHP中的多余标签'<p> <br> </ p>'？
- 23
停止<p>标签换行
- 24
CSS：li内的p元素转到新行
- 25
CSS：li内的p元素转到新行
- 26
由<br>，<br/>，<p>将PHP preg_split输入到单独的段落中
- 27
Android：替换<p>和<br />标签
- 28
替换beautifulsoup中的<p>和<br>标签
- 29
Android：替换<p>和<br />标签
我来说两句