6

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/

Alec Rust
  • 10,532
  • 12
  • 48
  • 63

7 Answers7

3

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/

highvolt
  • 398
  • 2
  • 9
1

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I hadn't though of that approach, thanks. As you say though, it's just replacing one fixed-width technique with another. – Alec Rust Jun 13 '12 at 14:03
  • Not really I'm afraid. I'd probably change the markup to solve it before I took that approach. Was just curious if this was achievable with CSS using the existing markup. – Alec Rust Jun 13 '12 at 14:14
1

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.

Alec Rust
  • 10,532
  • 12
  • 48
  • 63
  • 2
    That would never work. `a:before` goes inside and at the start of the `a`, not *before* it. For example: http://jsfiddle.net/thirtydot/TF2AT/1/. – thirtydot Jun 13 '12 at 14:46
1

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.

Ibmurai
  • 932
  • 7
  • 11
1

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

Velkommen
  • 121
  • 5
0

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/

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Yes, aware a `
    ` does the trick. Was just curious if it could be done without, I was hoping with `:before` on the anchor or something. Thanks for your reply.     – Alec Rust Jun 13 '12 at 14:33
  • 1
    You could use the trick from the answer I linked if you wrapped your text in a `span`: http://jsfiddle.net/thirtydot/zstKf/11/. It's just not worth it though. – thirtydot Jun 13 '12 at 14:35
  • Agreed. That's another one I hadn't thought of though - thanks! – Alec Rust Jun 13 '12 at 14:44
0

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

Not tested but should work in theory.

Andro Selva
  • 53,910
  • 52
  • 193
  • 240
liamcrean
  • 113
  • 3