Creating a foundation grid in list items

Question

I am trying to create an ordered list where each li this list contains a Foundation 5.5.3 part.

The problem I am facing is that my li elements insert some space at the top in front of its child network columns.

Example:

After some research, I found out that this is due to the CSS CSS rule, which places content: " "; display: table; content: " "; display: table; in the <... → psuedo element of my string.

However, overriding this, deleting it, places the interval in the line itself.

I tried to take the row class from li itself and insert the div.row , but I still see the same problem.

To repeat, I would like to create a grid of 2 columns in each li the ol/ul list, but this adds some vertical space at the top of each li . How can I get rid of this space, or is there another approach I have to take in order to get this grid with two columns within several li s.

Thanks.

---

Example:

 li { background-color: #ddd; padding: 5px; } li + li { margin-top: 5px !important; } li > span { background-color: yellow; } /* Trying to override ::before and ::after on .row */ .row.psuedo-override::before, .row.psuedo-override::after { content: none !important; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5> <ol> <li class="row collapse"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> </li> <li class="row collapse"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> </li> <li class="row collapse"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> </li> </ol> </div> </div> <hr> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5> <ol> <li class="row collapse psuedo-override"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> </li> <li class="row collapse psuedo-override"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> </li> <li class="row collapse psuedo-override"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> </li> </ol> </div> </div> 

Answer 1

Negative Stock Approach

As a simple workaround to avoid a space, you can simply set a negative top margin for your <span> tags with a high line height (since this is the height that the pseudo-element creates with content: " "; :

 li > span { margin-top: -1.6rem; } 

Compromise: this only works if your line-height does not change (for example, due to responsiveness, in which case you will have to adjust this value according to your media request).

 li { background-color: #ddd; padding: 5px; } li + li { margin-top: 5px !important; } li > span { background-color: yellow; margin-top: -1.6rem; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" /> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5> <ol> <li class="row collapse"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> </li> <li class="row collapse"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> </li> <li class="row collapse"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> </li> </ol> </div> </div> 

Float Alignment Approach

Another way is to remove the pseudo-elements, as you did with content: none !important; . Now the problem is that only the floating content is left in the <li> tag. Therefore, you need to insert an element at the end of each <li> , which has a clear: both; rule clear: both; , for example, a <br> .

 <br class="clear" /> 

 .clear { clear: both; } 

Compromise: you need to change your markup and your listing will disappear.

 li { background-color: #ddd; padding: 5px; } li + li { margin-top: 5px !important; } li > span { background-color: yellow; display: inline-block; } .row::before, .row::after { content: none !important; } .clear { clear: both; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" /> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5> <ol> <li class="row"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> <br class="clear" /> </li> <li class="row"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> <br class="clear" /> </li> <li class="row"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> <br class="clear" /> </li> </ol> </div> </div> 

Answer 2

This is a rather strange error. Without changing anything in your HTML, this is the best solution I could come up with:

 li { background-color: #ddd; padding: 5px; } li + li { margin-top: 5px !important; } li > span { background-color: yellow; } .row.collapse:before { display: block !important; height: .02px; } .row.collapse { padding: 0; /* Did you want padding? */ width: 100%; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5> <ol> <li class="row collapse"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> </li> <li class="row collapse"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> </li> <li class="row collapse"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> </li> </ol> </div> </div> <hr> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5> <ol> <li class="row collapse psuedo-override"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> </li> <li class="row collapse psuedo-override"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> </li> <li class="row collapse psuedo-override"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> </li> </ol> </div> </div> 

W3C says my CSS is valid, although it's a bit hacked.
I am pretty puzzled by the problem at all.

Answer 3

CSS counter approach:

1) Go back to where you tried to take the row class from li itself and insert the div.row . I think that this avoids a number of problems associated with the default layout of lists and list items that conflict with the default layout of strings.

2) Use CSS to insert your own list numbering using a counter instead of using the default numbering <ol> . This will allow you to arrange the number in which you want.

 ol {list-style-type:none; margin-left:0; padding-left:0;} li {padding-left:2em; counter-increment:li;} li::before {content:counter(li) "."; position:absolute; margin-left:-2em;} 

Fiddle: https://jsfiddle.net/9qw2akkj/

Answer 4

Just add this css to solve the problem ...

 .row .row.collapse::before, .row .row.collapse::after { display: block!important; height: 0; } 

Here is the whole code :)

 li { background-color: #ddd; padding: 5px; } li + li { margin-top: 5px !important; } li > span { background-color: yellow; } /* Trying to override ::before and ::after on .row */ .row .row.collapse::before, .row .row.collapse::after { display: block!important; height: 0; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet"/> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd></h5> <ol> <li class="row collapse"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> </li> <li class="row collapse"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> </li> <li class="row collapse"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> </li> </ol> </div> </div> <hr> <div class="row"> <div class="small-12 columns"> <h1>My List</h1> <h5><kbd>li</kbd> tags are <kbd>"row collapse"</kbd>, with no psuedo content. Vertical height gets messed up though...</h5> <ol> <li class="row collapse psuedo-override"> <span class="small-9 columns">Some long text goes here that should wrap to the next line if it is sufficiently long enough which this should qualify</span> <span class="small-3 columns text-right">$100</span> </li> <li class="row collapse psuedo-override"> <span class="small-9 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nulla mauris, iaculis vel ante eget, vestibulum ornare est. </span> <span class="small-3 columns text-right">$50</span> </li> <li class="row collapse psuedo-override"> <span class="small-9 columns">Phasellus quis odio ac sapien congue aliquam sit amet ornare magna. Quisque consequat mauris nec turpis finibus, id bibendum dolor tincidunt.</span> <span class="small-3 columns text-right">$75</span> </li> </ol> </div> </div> 

Hope that helps :)