Images are not aligned correctly in a horizontal list
What simple CSS mistake am I making?
I have a bunch of image settings in the ul as part of the gallery, each with a caption above the textbox
For all but mobile breakpoints, I would like them (thumbnail versions) to line up 4.
By setting the width to 25% I thought the following would handle this, but it splits it into 3 parts with a bunch of space on the right side of the container - as if on the container or image mark forcing a newline.
There is also a small amount of margin or padding on all sides of the image. I have double checked each element through the browser and there is no field or padding to apply to another cheat style I may have missed.
UPDATE: . In my example script, the hover textarea clearly extends beyond the right edge of the image, but the css sets its width to 100%. Is my location just positioned?
Link to live page www.deckdoctors.net/bay-area-deck-ideas.html
Abbreviated HTML:
<div id="gallery">
<ul class="nivo">
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="thumbnail-image.jpg">
<span>Some overlay text</span></a>
</li>
</ul>
</div>
Shorthand CSS:
#gallery {
width:100%;
padding:0;
}
#gallery ul {
list-style:none;
margin:0;
padding:0;
}
#gallery ul li {
display:inline;
position:relative;
margin:0;
padding:0;
}
#gallery ul li span {
visibility:hidden;
position:absolute;
width:100%;
left:0;
bottom:0px;
z-index:3;
background:rgba(0,0,0,.6);
color:#FFF;
text-align:center;
}
#gallery ul li:hover span {
visibility:visible;
}
#gallery ul li a img {
width:25%;
margin:0;
padding:0;
}
source to share
Here's the problem:
Inline elements will have spaces after them, which will cause the last element on the line to go down to the next line, so if you set the width to 25%, you will need to undo the spaces created after each <li>
.
The best way to do this is to float: left (which makes the elements "block-level") on <li>
and set its width to 25%.
eg.
ul li {float: left; width: 25%}
See this fiddle: http://jsfiddle.net/pavkr/685m0b5z/
Also see this screenshot in action on their website:
source to share
Here's my fix: http://jsfiddle.net/3rmzz59m/1/
I believe the problem is with the built-in li
s; sizing is a bit weird when it comes to inline elements. By changing them to inline-block
and setting the width of the elements instead li
, the extra spacing around them disappears.
source to share
Make images 24% wide instead of 25%
#gallery ul li a img {
width:24%;
margin:0;
padding:0;
}
also set text-align: center for gallery:
#gallery {
width:100%;
padding:0;
text-align: center;
}
Checkout this DEMO: http://jsfiddle.net/3rmzz59m/2/
source to share