hr元素出现了奇怪的小尾巴

期望效果如下:

于是使用flex布局

<div class="jyhmbottomtext" ><hr><p>{{bottomText}}</p><hr></div>

里面三个元素设置display: block(默认), width: 100%即可

奇怪的是hr元素出现了小尾巴

设置border-left-width和border-right-width为0以后才正常.

求解!