somanyerrorswhy somanyerrorswhy - 1 year ago 49
HTML Question

My current horizontal scroll list consisting of images and text is placing the text horizontally to the images. How do I place the text below?


<div id="filterContainer">
<ul id="filters">
<li><img src="" id="normalPic">
<a href="#" id="normal">Normal</a> </li>
<li><img src="" id="vintagePic">
<a href="#" id="vintage">Vintage</a> </li>
<li><img src="" id="lomoPic">
<a href="#" id="lomo">Lomo</a> </li>
<li><img src="" id="clarityPic">
<a href="#" id="clarity">Clarity</a> </li>
<li><img src="" id="sinCityPic">
<a href="#" id="sinCity">Sin City</a> </li>
<li><img src="" id="sunrisePic">
<a href="#" id="sunrise">Sunrise</a> </li>
<li><img src="" id="crossProcessPic">
<a href="#" id="crossProcess">Cross Process</a> </li>
<li><img src="" id="orangePeelPic">
<a href="#" id="orangePeel">Orange Peel</a></li>
<a href="#" id="love">Love</a></li>
<a href="#" id="grungy">Grungy</a></li>
<a href="#" id="jarques">Jarques</a></li>
<li><img src="" id="pinholePic">
<a href="#" id="pinhole">Pinhole</a></li>
<li><img src="" id="oldBootPic">
<a href="#" id="oldBoot">Old Boot</a></li>
<li><img src="" id="glowingSunPic">
<a href="#" id="glowingSun">Glowing Sun</a></li>
<li><img src="" id="hazyDaysPic">
<a href="#" id="hazyDays">Hazy Days</a></li>
<li><img src="" id="herMajestyPic">
<a href="#" id="herMajesty">Her Majesty</a></li>
<li><img src="" id="nostalgiaPic">
<a href="#" id="nostalgia">Nostalgia</a></li>
<li><img src="" id="hemingwayPic">
<a href="#" id="hemingway">Hemingway</a></li>
<li><img src="" id="concentratePic">
<a href="#" id="concentrate">Concentrate</a></li>

#filterContainer ul{
width: 30%;
display: inline-block;
white-space: nowrap;
overflow: auto;
margin: 0;
padding: 0;
#filterContainer li{
width: 25%;
display: inline-block;

margin-top: 1%;
display: block;
margin: 0 auto;

I've tried changing the width to maybe squeeze the text underneath the image but everything just ends up getting smushed and the text remains horizontal to the images. I've also tried adding height in case maybe there wasn't enough space but that didn't seem to do anything either :/

Answer Source

You can add display: block; to your <a> tag. This will put the text under the image.


li a {
  display: block;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download