Using Haml with Line Spacing

So, I read the solutions that the distance between the aisles will decrease when using the built-in block, not floats: display: additional stock of the additional block and http://css-tricks.com/fighting-the-space-between-inline- block-elements / .

So, if you use haml and want to put the closing tag on the same line as the next opening tag, is there a solution besides switching to ERB?

(and no, I don’t want to bind to the css property of the parent container and have to override this in all the children).

It breaks (has an interval between anchors).

So, is it true that, in spite of the recommendations to make such layouts using the built-in block rather than floats, it seems that the floats still go, especially when using haml?

CSS

nav a { display: inline-block; padding: 5px; background: red; } 

HTML

 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> 

Workaround (css tricks one):

 <ul> <li> one</li><li> two</li><li> three</li> </ul> 

or

 <ul> <li>one</li ><li>two</li ><li>three</li> </ul> 

other:

 <ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul> 
+7
source share
1 answer

I found the answer: http://haml.info/docs/yardoc/file.REFERENCE.html#whitespace_removal__and_

(this is a super useful article on the topic: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ )

Here's the code for the experiment: http://cdpn.io/Bjblr

enter image description here

enter image description here

enter image description here

And it worked: enter image description here

enter image description here

Here's the html if the anchor text is on the same line (same result, but harder to read the original html:

enter image description here

enter image description here

+14
source

All Articles