To avoid long lists I've got my li set to float: left so that they alternate rows. However, on occasion this causes an unintentional gap between elements when the content in a li takes up two lines. My HTML is:
<ul class="gmc-ingredient-list">
<li>500g Tagliatelle</li>
<li>50g wortel</li>
<li>50g ui</li>
<li>50g bleekselderij</li>
<li>100g pancetta</li>
<li>200g half-om-half-gehakt</li>
<li>200g rundergehakt</li>
<li>200 ml Primitivo (rode wijn)</li>
<li>200ml runderbouillon</li>
<li>5 eetlepels tomatenpuree</li>
<li>Olijfolie</li>
<li>Zeezout</li>
<li>Verse peper</li>
</ul>
My CSS is:
ul.gmc-ingredient-list {
margin: 0;
padding: 0;
list-style: none;
width: 300px;
}
ul.gmc-ingredient-list li {
background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
list-style: none outside none;
padding: 0px 0 0 20px;
width: 130px;
float: left;
}
And the output looks like http://allesoveritaliaanseten.nl/ragu-alla-bolognese/
But there are also some cases in which a li takes up two lines and the output is just fine like http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/
How can I stop the list showing those gaps?
To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to <ul> tag list item i.e. <li> tag. Through this, padding gets added, which will create space between list bullets and text in HTML.
In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.
The spacing between list items in an orderedlist or itemizedlist element can be minimized by the document author by adding a spacing="compact" attribute to the list element. In HTML output, the list will get a compact="compact" attribute on the list start tag to reduce spacing in the browser.
CSS: extra gap between LI elements - Stack Overflow At this site, when you hover over a menu item in the large footer menu, there is a gap to the left of the blue li:hover and to the right of the border of the previous li (indicated by the red section
The compatibility between Li metal, electrolyte, and the anode matrix should been elaborately considered to achieve a long lifespan and high energy density Li-S pouch cells. 3. Conclusions The gap between Li-S coin cell and pouch cell are probed and the failure mechanism for Li-S pouch cell was investigated.
The gap property defines the size of the gap between the rows and columns. It is a shorthand for the following properties: Note: The gap property was formerly known as grid-gap. yes. Read about animatable Try it
Browser Support Property gap (in Multiple Columns) 66 16 61 Not supported gap (in Grid) 66 16 61 10.1 gap (in Flexbox) 84 84 63 Not supported
With css3 you can add columns to your lists
ul.gmc-ingredient-list {
margin: 0;
padding:0;
-moz-column-count: 2;
-moz-column-gap: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0;
column-count: 2;
column-gap: 0;
width:300px;
}
ul.gmc-ingredient-list li {
background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
list-style: none outside none;
padding: 0px 0 0 20px;
width:130px;
}
don't forget to remove the float from the li
Example: http://jsfiddle.net/LWBdp/3/
IE Problems CSS columns don't seem to work for IE, if you leave the float:left in there it will look like you had in IE but will look better in the other browsers!
For more information about css-columns take a look at this article at w3schools
I would recommend you using http://www.csscripting.com/css-multi-column/
I use this script for a long time now and it's really efficient compared to other possibilities available. If your site is done with AJAX, you will have to modify this line: ut.XBrowserAddEventHandler(window,'load',function() { documentReady = true; processElements(); } );
EDIT: This solution is working on any browser since IE6...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With