Question

我已成功设法在同一行上<p>关注<h>，但我希望在新行上重复此操作，但下一个<h>正在跟进最后<p> - 我该怎么办？

我尝试了各种“清晰”选项，但没有打破内联。我真的不想使用<br>或空<p>，也不会过于乐意与<div>包围。

注意 - 我尝试从第二个inline元素中删除<h>，虽然这会将<h>放在新行上，但以下<p>结束在它自己的新线上。

CSS

.inline {display: inline;}

.newline {clear: left;}

HTML

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<h5 class="inline newline">Next Heading:</h5>

<p class="inline">Some more text.</p>

这是我想要达到的结果：

标题：有些文字。

下一页标题更多文字。

但我得到了这个：

标题：有些文字。 下一页标题更多文字。

任何建议 - 尽量保持代码简洁明快。

[更新]

目前我将按照hafid2com的建议添加一个空div，使用以下内容（只需添加高度即可获得所需结果）：

.clear { clear: both; display: block; content: ""; width: 100%; }

<div class="clear"></div>

如小提琴所示：http://jsfiddle.net/rxAnk/5/

Answer 1

添加：

HTML：

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<div class="clear"></div>

<h5 class="inline">Next Heading:</h5>

<p class="inline">Some more text.</p>

CSS：

.inline {display: inline;}

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}

Answer 2

有多种方法可以达到预期的效果：

1）您可以使用float而不是display：

<style type="text/css">
    h5 {float:left;clear:left;}
    p {float:left;}
</style>

<h5>Heading:</h5>
<p>Some text.</p>
<h5>Next Heading:</h5>
<p>Some more text.</p>

2）您可以使用<strong>代替<h5>并将标题放在<p>标记内（感谢@ Ralph.m指出其中<h5>个标记<p>无效）：

<p><strong>Heading:</strong> Some text.</p>
<p><strong>Next Heading:</strong> Some more text.</p>

3）您可以保留display:inline;个样式，并将每个<h5>和<p>换成<div>：

<style type="text/css">
    h5, p {display:inline;}
</style>

<div>
    <h5>Heading:</h5>
    <p>Some text.</p>
</div>
<div>
    <h5>Next Heading:</h5>
    <p>Some more text.</p>
</div>

Answer 3

我会怀疑你是否真的在这里使用正确的标记。请记住，HTML标记不是表示性的，而是语义性的。使用H5很少（如果有的话）良好的语义，除非它们有助于打破以H4为首的内容等。

在不知道这里的背景的情况下，我会建议这样的事情：

<style type="text/css">
  p span {font-weight: bold;}
</style>

<p><span>Heading:</span> Some text.</p>
<p><span>Next Heading:</span> Some more text.</p>

当然，如果确实需要标题，请将<p>替换为<hx>，但我真的怀疑这是合适的。

（另外，float的替代方法是display: inline-block。但是永远不要在<h5>内嵌入<p>，因为这不是有效的编码。）

Answer 4

我同意BoltClock，使用float。怎么样：

CSS

.inline {float:left;}
.clear {clear:both;}

HTML

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>
<div class="clear"></div>

<h5 class="inline">Next Heading:</h5>

<p class="inline">Some more text.</p>

这是一个小提琴http://jsfiddle.net/rxAnk/

使用CSS时的换行符“display：inline”

4 个答案: