6

我已经成功地在同一行上获得了<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/

4

5 回答 5

6

添加这个：

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%;  
}
于 2013-04-28T15:00:27.297 回答
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;每个样式包装在 a 中：<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>
于 2013-04-28T13:43:28.127 回答
1

我会质疑您是否真的在这里使用了正确的标记。请记住，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>，尽管我真的怀疑这是否合适。

（顺便说一句，is 的替代float方法。但永远不要在 a中display: inline-block嵌套 an ，因为这不是有效的编码。）<h5><p>

于 2013-04-28T14:49:10.683 回答
1

我同意 BoltClock，使用浮动。这个怎么样：

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/

于 2013-04-28T15:03:46.747 回答
1

如果您不想手动插入其他标记，请尝试这种注入换行符并使用:before并将其设置为在空白处换行的方法。\A, 或\00000a, 是 CSS 接受的 ISO-10646 字符代码 (U+000A)。

http://jsfiddle.net/TwoD/ujhwLouc/

CSS

.inline {display: inline;}
h5.inline.newline:before {content: '\A'; white-space:pre-line;}

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>
于 2015-09-20T07:04:28.887 回答