somanyerrorswhy somanyerrorswhy - 4 months ago 4
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?

Fiddle

<table>
<tr>
<td>
<div id="filterContainer">
<ul id="filters">
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="normalPic">
<a href="#" id="normal">Normal</a> </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="vintagePic">
<a href="#" id="vintage">Vintage</a> </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="lomoPic">
<a href="#" id="lomo">Lomo</a> </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="clarityPic">
<a href="#" id="clarity">Clarity</a> </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="sinCityPic">
<a href="#" id="sinCity">Sin City</a> </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="sunrisePic">
<a href="#" id="sunrise">Sunrise</a> </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="crossProcessPic">
<a href="#" id="crossProcess">Cross Process</a> </li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="orangePeelPic">
<a href="#" id="orangePeel">Orange Peel</a></li>
<li><img src="R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" id="lovePic">
<a href="#" id="love">Love</a></li>
<li><img src="R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" id="grungyPic">
<a href="#" id="grungy">Grungy</a></li>
<li><img src="R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" id="jarquesPic">
<a href="#" id="jarques">Jarques</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="pinholePic">
<a href="#" id="pinhole">Pinhole</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="oldBootPic">
<a href="#" id="oldBoot">Old Boot</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="glowingSunPic">
<a href="#" id="glowingSun">Glowing Sun</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="hazyDaysPic">
<a href="#" id="hazyDays">Hazy Days</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="herMajestyPic">
<a href="#" id="herMajesty">Her Majesty</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="nostalgiaPic">
<a href="#" id="nostalgia">Nostalgia</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="hemingwayPic">
<a href="#" id="hemingway">Hemingway</a></li>
<li><img src="http://vignette1.wikia.nocookie.net/farmville2/images/3/36/Pink_Lemonade_Blueberry_Cupcake.png/revision/latest?cb=20150927002728" id="concentratePic">
<a href="#" id="concentrate">Concentrate</a></li>
</ul>
</div>
</td>
</tr>
</table>

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

#filterContainer{
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

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

CSS

li a {
  display: block;
}

JSFiddle

Comments