inline-block with ordered list and multiline

[Tipo]

I’m getting desperate. I thought that will be easy to create an ordered list with more then one row. Only one line is no problem. But when I add a second line to any “li” then the leading number moves to the second row instead of staying at the top.

<style>
   .inline-block {
      display: inline-block;
      width: 50%;
   }

   .text-right {
      text-align: right;
      width: 49%;
   }
</style>

<ol>
   <li>
      <div class="inline-block">Line one<br />Line two</div>
      <div class="inline-block text-right">Some buttons on the right</div>
   </li>
</ol>

That example looks like this here: 
    Line one 
1. Line two                       Some buttons on the right

But I want this: 
1. Line one                       Some buttons on the right 
    Line two

I’ve tried this first with floats but that was horrible and didn’t work. With floats I had the problem that everything was ok in Mozilla Firefox but in Google Chrome the leading number wasn’t left it was right next to the first div-container.

Maybe there is no way to create multiline inline ordered lists.

[Paulie_D]

It’s a bit fuglier than I would like…but I dashed this off.

http://codepen.io/Paulie-D/pen/Clpmh

[lothsun]

I would do something like this.

http://codepen.io/lothsun/pen/zaLxk

[Tipo]

This comes close to mine.

But therefore I have some more encapsulated DIVs in my lists and this DIVs shall be aligned in one row. I found a solution. li div { vertical-align: top }

The big question is: WHY does it work? This vertical align pushed my leading number back top. http://codepen.io/Tipo/pen/nojEm

And why can’t I use 50% width for the second container?
I thought 50% + 50% = 100%
But if that second container gets 50% width it jumps into the next row.

[Paulie_D]

And why can’t I use 50% width for the second container? I thought 50% + 50% = 100% But if that second container gets 50% width it jumps into the next row.

Because with inline-block you have to account for font-size as inline-block also counts whitespace in your HTML and will leave a space between each block.

Usually you can solve this problem by setting the parent element’s font-size to zero BUT, in this case, you can’t do that as it would make the li numbering disappear.

What you CAN do is introduce a little negative margin to counteract the issue.

http://codepen.io/Paulie-D/pen/rbCiD

http://www.ternstyle.us/blog/float-vs-inline-block

[Author]

Posts