在我的小提琴中，您会看到文本中断，我想<hr>在CSS中放置一个并装饰它，但是我不知道如何执行此操作，因为这样做会破坏我的内联代码块，认为这是因为<hr>元素是一个块元素。周围是否有任何创造性的解决方案？我需要将其固定在文本的两个段落之间，以保持响应能力。
谢谢！
HTML：
<section>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
</div>
</section>
CSS：
.first {
height: 100%;
line-height: 0;
}
.first p {
vertical-align: middle;
display: inline-block;
width: 49%;
}
.ipad {
vertical-align: middle;
display: inline-block;
width: 49.2%;
}
p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}
您可以通过将<p>和<hr>元素包装到另一个<div>元素中并制成来实现此目的display:inline-block。我的解决方案涉及添加此包装器，因此您的结构最终是：
<section>
<div class="first">
<div class="text-wrap">
<p></p>
<hr />
<p></p>
</div>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg" />
</div>
</section>
（其他元素是.text-wrap。请注意，我将这两段分成了几个单独的<p>元素。）除了我删除了的定义.first p并添加了这两个之外，我大多独自留下了CSS ：
.text-wrap{
vertical-align: middle;
display:inline-block;
width:49%;
}
.text-wrap p {
vertical-align: middle;
display: inline-block;
}
这是一个JSFiddle示例，显示了实现的目的。如果这不是您想要的，或者您想使用其他方法，请告诉我，我们将竭诚为您服务！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句