Question

如何将内联元素推送到下一行，就好像它们具有＆lt; BR＆GT;标记在他们之后？

下面的代码显示了我想要实现的结果，但是在我的示例中，内联元素被推送到下一行，其中＆lt; BR＆GT;我希望用CSS实现这个效果。

元素需要保持内联，以便bakckground宽度与文本长度匹配。

＆＃13;

.foo {
  background: red;
  }

＆＃13;

    <a class="foo" href="#">Inline Element 1, of a length</a><br>
    <a class="foo" href="#">Inline Element 2</a><br>
    <a class="foo" href="#">Inline Element 3 is the longest though</a><br>

＆＃13;

Answer 1

http://jsfiddle.net/tfkLgsm2/

.foo {
  background: red;
    display:inline;
  }
.foo:after {
    content:"";
    display:block;
}

Answer 2

您可以使用display: table：

＆＃13;

.foo {
  background: red;
  display: table;
  }

＆＃13;

    <a class="foo" href="#">Inline Element 1, of a length</a>
    <a class="foo" href="#">Inline Element 2</a>
    <a class="foo" href="#">Inline Element 3 is the longest though</a>

＆＃13;

这样你的红色背景将与文字相同，而不是整行。

如何将内联元素推送到下一行

2 个答案: