Clearing an inline-block element to the next line

Question

I'm looking to clear an inline-block element (in this case an <a> within a <p>) to the next line, without having to set display:block and defining a width.

Here's an example: http://jsfiddle.net/alecrust/zstKf/

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

Answer 1

If you want to avoid setting an explicit width so 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>

Note that I have added a <span> tag around the link.

Style your wrapper with CSS:

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

Setting the width to 100% forces the wrapper to take up the whole line. Keeping the <a> tag for the link set to inline-block allows it to have padding and a background applied while not having it expand to fit the container's width of 100%.

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

Answer 2

It's a bit of a kludge, but it will work:

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

You'll have to fudge the left position, but that basically puts you back into setting a known value, just like the width issue in your display:block example. Not really any better, just a different approach.