将内联块元素清除到下一行

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.

Answer 3

The closest I can get to what I want is using :before to insert a new line before the <a> ( Fiddle ). This unfortunately doesn't clear it to the next line though.

Answer 4

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

I've 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's so simple it should work in all browsers supporting display: inline-block .

Answer 5

内联块元素后面的空<div/>清除内联块。

Answer 6

With the requirements you have, I don't think it's possible.

I was hoping that this would help , but it doesn't because you don't have an element before your link.

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

Answer 7

Using the pseudo class :: after you could add content with a clear:both ; property to it.

Not tested but should work in theory.