Clearing an inline block element to the next line

Question

I want to clear an element of an inline block (in this case <a> inside <p> ) to the next line without setting display:block and not defining the width.

Here is an example: http://jsfiddle.net/alecrust/zstKf/

Here's the desired result (using display:block and defining the width): http://jsfiddle.net/alecrust/TmwhU/

Answer 1

If you want to avoid setting the explicit width so that you can style the background according to the actual length of the text, you can do the following:

Wrap your link:

  <p>To stay up to date <span><a href="#">Follow Us</a></span></p> 

Please note that I added the <span> via the link.

Create your wrapper using CSS:

  span { display: inline-block; width: 100%; } 

Setting the width to 100% causes the wrapper to span the entire string. Saving the <a> tag for a link attached to an inline block allows you to indent and have a background effect if it does not expand to fit the width of the container 100%.

Forked JSFiddle: http://jsfiddle.net/Cm9kZ/

Answer 2

This is a little shreds, but it will work:

 a { display: inline-block; padding: 5px 18px; background-color: #8C4AD5; text-decoration: none; position:relative; top:25px; left:-30% } 

You will need to wash the left position, but this basically returns you to setting a known value, just like the width issue in your display:block example. Not really better, just a different approach.

Answer 3

Closest I can get what I want using :before to insert a new line before <a> ( Fiddle ). This, unfortunately, does not clear it to the next line.

Answer 4

This only works if you want to split the line after the last element in p.

I experimented quite a bit and this works for me in Safari 6:

 p.linebreak-after-last-element:after { content: ""; display: inline-block; width: 100%; } 

I have not tested this in other browsers, but it is so simple that it should work in all browsers that support display: inline-block .

Answer 5

An empty <div/> after the inline-block element clears the inline block.

Answer 6

With the requirements that you have, I do not think it is possible.

I was hoping this would help , but that is not because you do not have the element in front of your link.

You should just change your HTML, for example: http://jsfiddle.net/thirtydot/zstKf/10/

Answer 7

Using pseudo class :: after adding content with clear:both ; to him.

Not tested, but should work theoretically.