How can I specify distance between list items?
Tags: html,css
Problem :
I want to set a distance of 20px between every single list.
HTML:
<div id="folio">
<ul>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
CSS:
#folio { width:1200px; }
#folio ul li { width:588px; height:273px; display:inline-block; background:#cf5b6f; border:1px solid #8e1028; list-style:none; }
How can I do this?
Solution :
As @Paul said, you should add:
#folio ul li{ margin:0 20px 20px 0; vertical-align:top}
Due to using display: inline-block
, you should also remove the whitespace in your HTML, like this:
<div id="folio">
<ul>
<li><img src=""></li><li><img src=""></li><li><img src=""></li><li><img src=""></li>
</ul>
</div>
I also added another width
and then overflow: hidden
to #folio
to mask the extra margin
.
See: http://jsfiddle.net/Brnsg/3/
CSS Howto..
As DevIshone said, media queries are exactly what you're looking for. In that case it would look something like this @media (max-width: 450px) and (min-width: 400px) { font-size: 4em; }...
Your <div> is inheriting a font-size of 0 from .hi-icon. Remove that, and it shows below the circle.
Add the following property to .infobox: min-height: 100%; Or you can just remove the height properties entirely. But height: 100% will not work (at least in the fiddle) because it...
Maybe something like this helps? http://jsfiddle.net/epyFT/3/ I'm not sure how to make the button align to the no-wrapped width of the container, and am only using percentage widths for the...
There was a study out where this was tested. I no longer have the link but, suffice to say, it slows things down for all the reasons you probably know...
If I've understood your question correctly, .right{ : right: 0px; } should do the trick. A live demo at jsFiddle....
apply this code .sub-menu .sub-menu li:last-child{ border-bottom: 12px solid red; } and remove this code .menu-new li .sub-menu li ul li:last-child, .menu-new li .sub-menu li:last-child{ border-bottom: 12px solid black; }...
You need to use $(".nav-primary") selector for the class nav-primary, not $("nav-primary"). Here you have information about jQuery selectors....
Since the h3 is wrapped in an a that uses $primary-color you can use: a[data-reveal-id] h3 { color: inherit; } http://codepen.io/anon/pen/iflCA...
adding white-space:nowrap; to #menu keeps all menu items in one line during zoom, which means that my site now looks ok. However, chrome and firefox still behave differently under zoom,...
Best use with <table>s, but if must use <div> either you set specific sizes (is not the best option) or, you surround each column in a separate <div> example: <!--...
As mentioned in the Google Material design documents: A dp is equal to one physical pixel on a screen with a density of 160. To calculate dp: dp = (width...
You could set the vertical-align: middle; to the inline elements and remove useless top/bottom margin from your Enter Domain Name input. .elegantaero input[type="text"], .elegantaero select, .elegantaero .button { vertical-align: middle;...
I believe this is what you're looking for: https://jsfiddle.net/richardgirges/8m9qstg3/11/ We're saving a reference to the lastClicked div, and targeting it specifically when reset is hit. Like so: var $lastClicked =...
You will need to absolutely position the .flag element and then position it using the top and the right properties, like this: .flag { width: 0; height: 0; border-left: 80px...
All you need is a skin.css file in your skinning directory the reference will be automatically added. However, when developing a skin, if you first click "Parse Skin Package" when...
DEMO: http://jsfiddle.net/KADqt/2/ An absolute positioned element won't affect other elements, as it's removed from the document flow. Also, just use top, and left, instead of margin-top, margin-left. An absolute positioned...
I haven't seen a need to in ages (like Safari 2). Make a new question about the actual problem you're having and someone can probably tell you how to fix...
I created a JSFiddle to show an example of what you could do. All using CSS. I could see multiple ways of accomplishing this using the basic example I provided....
You can do like this way var visible = 3; $("#myList li:lt(" + visible + ")").show(); $("#loadMore").click(function() { $("#showLess").show(); visible = $("#myList li:visible").length + 3; $("#myList li:lt(" + visible +...
Simply multiply by 100% $ echo "*{width: (9/960)*100%;}" | .npm/less/1.3.0/package/bin/lessc - * { width: 0.9375%; } ...
Since your h1 is layout parent, you only need to add left: 0 to the #innerFooter h1 div rules.
Well you have your table set to 100% width.. it must expand something :-)
As far as I know, you can't nest more than one animation and add the animation-iteration-count property. It will repeat every animation individually. However, if you do just one animation,...
You have to set background-position: 50% 50%. Those -x and -y properties are only supported in Internet Explorer and Webkit browsers.
You can use something similar to: tr { border: 1px dashed #f0f; float: left } That will work in IE8+ and all modern browsers. It fails in IE7. See: http://jsfiddle.net/XeLUV/...
Added a generally accepted version of clearfix, and removed a lot of positioning. The big thing is your widths were 15% + 85% = 100% + 3px for border, so...
Just do like this HTML <table style='width: 150px; border: 1px solid black;'> <tr> <td>blablabla</td> <td>blablabla</td> </tr> <tr> <td>abcd</td> <td>abcd</td> </tr> </table> CSS table { width:600px!important; border:1px solid black; } ...
You need to use table-layout:fixed; + width in oder to control max-width of table or td. example : table of 500px and your td to overflow at 50%. <table class="table"...
As you can see in Bootstrap' official documnetation for tooltip Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | Insert html into the tooltip. If...