0

I've got a collection of spans which I want to squeeze into one line, very similar to the Language Stats graph on a Github Project Page. The problem is that the spans have spacing between them (which I didn't add) and so with the parent at width: 100%;, the line wraps.

Github:

Github Language Stats

My attempt:

My attempt

I found some helpful information in this question asked earlier on SO. It showed me a solution to the problem I was having.

However, I still have a problem - because I'm using HAML, I've got line breaks between the spans in my original source, and I don't know how to remove them. I'm looking for a way to remove the spacing between spans when the spans do have line breaks between them.

I've got a Fiddle showing what I'm trying to do http://jsfiddle.net/j9Y7a/1/ -- the above version shows how I want it to look, the bottom shows what happens when the line breaks are present.

How can I remove the spacing between line-separated span tags without removing the line breaks?

Community
  • 1
  • 1
asfallows
  • 5,998
  • 6
  • 29
  • 48
  • 1
    You could always resort to `font-size:0`.. that would work. http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-div-elements/19038859#19038859 .. updated example - http://jsfiddle.net/29YVA/ – Josh Crozier May 16 '14 at 18:20
  • 1
    In Haml you can control the [whitespace around tags with `<` and `>`](http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_). – matt May 16 '14 at 22:13
  • Thanks, @matt! I debated also asking for the HAML solution. Good to know there is one. – asfallows May 19 '14 at 02:42

1 Answers1

1

If you add

float:left;

to .pipeline-bucket-segment, then all segments are put nicely together.

Read all about floats here.

Sidney Gijzen
  • 1,931
  • 3
  • 24
  • 27