Geek Answers Handbook

Webkit display: inline block behaves inconsistently

I have a gap with several other spans inside it, and I want to switch the sub-gaps between display:block and display:inline . Spaces start with display:inline-block , then switch to display:block . It works great. The problem is switching to Webkit (works fine in Firefox): gaps are displayed with extra line breaks between them.

Can this rendering be done correctly without putting <br/> tags between spans?

demo here: http://jsbin.com/omalu3/4/edit

+4
source share
3 answers

Any other solution would be a workaround, as this is a browser error. An alternative to the solution of the woodman:

  #a.multiline * { width: 100% } #a.oneline * { width: auto } #a * { border:solid 1px black; display:inline-block }
+1
source

Another workaround would be to not migrate children with a different range, which is an inline element. Use <div> for #a and it behaves correctly (in Webkit at least!).

In another note, the star selector is not very effective, although I understand that this is just an example, so I will not criticize it here: D

+1
source

Now not so much fun.

I'm not sure what causes the problem, but it goes away if you add float: left; at #a.oneline * . When you do this, you can change the display to lock so that your styles look like this:

 #a.multiline * { } #a.oneline * { float:left; } #a * { border:solid 1px black; display:block;}

The only difference between this solution and your original location is that the oneline blocks will be aligned at the top, not the bottom, but you can set a fixed height for these elements.

0
source

More articles:


All Articles