CODEWITHSUNDEEP
htmlcss
Adam Scot
Adam Scot

Reputation: 1409

How do I push inline elements onto the next line

How are inline elements pushed onto the next line as if they had a < br> tag after them?

The below code shows the result that I am trying to achieve, however in my example, inline elements are pushed onto the next line with a < br> element, I wish to achieve this effect with CSS.

The elements need to remain inline so that the bakckground width matches the text length.

.foo {
  background: red;
  }
    <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>

Upvotes: 1

Views: 91

Answers (2)

DarkAjax
DarkAjax

Reputation: 16223

You could use display: table:

.foo {
  background: red;
  display: table;
  }
    <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>

that way your red background will be the same size as your text, instead of the entire line.

Upvotes: 0

sinisake
sinisake

Reputation: 11328

http://jsfiddle.net/tfkLgsm2/

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

Upvotes: 2

Related Questions