当块不适合此内联时自动高度内联

Question

我在p中有一些“块”，它应该是右对齐的：

<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

Answer 2

实现我认为您正在寻找的内容的最简单方法是使用float: right，而不是在css中使用margin。

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

https://jsfiddle.net/tuna7u0x/