html - 当 block 不适合此内联时自动高度内联

Question

我在 p 中有一些应该右对齐的“ block ”:

<p>text at line
    <span style="display: block; float: right">
        <span class="tag">
           tag1
        </span>
        <span class="tag">
           tag2
        </span>
        <span class="tag">
           tag3
        </span>
    </span>
</p>
<hr>
Some text after hr

CSS:

.tag {
    background-color:red;
    margin-right: 10px;
    padding:5px;
}

好吧，但在小屏幕上我有一些问题:

https://jsfiddle.net/3pcjqww0/

Answer 1

将 p 更改为 div，并添加以下样式:

div {
  line-height: 1.8em;  //this prevents the tags from overlapping the text on small screens
}

hr {
  clear: both;         //this keeps the horizontal rule at 100% width
}

Fiddle