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

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

Answer 2

实现我认为您正在寻找的最简单方法是使用 float: right 而不是在 css.

中使用 margin

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

https://jsfiddle.net/tuna7u0x/

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

Auto-height inline when block not fit this inline

html

css

inline

block