Clearing an inline-block element to the next line
css, html
Solution
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/
Problem
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/