Menu
I'm trying to have a list of images displayed horizontaly. It's kind of like a carousel except instead of using jquery and animations I'd just have a scrollbar
<div class="playlist-wrapper">
<ul class="playlist">
<li> <img src='http://blah' /></li>
<li> <img src='http://blah' /></li>
<li> <img src='http://blah' /></li>
<li> <img src='http://blah' /></li>
</ul>
</div>
.playlist-wrapper{width: 500px; overflow-x:scroll}
ul{width: 10000px;}
li{float:left}
The problem here is that I have to define the width of the UL tag because if I don't the images are going to go the next line and I'm going to get an Y scroll that I don't want.
I can't use jQuery. I tried no-wrap, but this only works for text.
Any idea?
296
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
As a result, the elements can sit next to each other. The major difference between display: inline; and display: inline-block; is that, display: inline-block; also allows us to set the width and height of the element. We can prevent inline-block divs from wrapping by adding suitable Bootstrap classes.
You'll have to wrap your text in its own container. Since your <img> is floated to the left, you can use overflow: hidden on your newly-added container to achieve no wrapping of the text.
Use display: inline-block and vertical-align: top to Place the Text Next to an Image in HTML. We can use the display and vertical-align properties to place a text next to an image in HTML. The display defines how an element displays in HTML.
ul {
white-space: nowrap;
}
li {
display: inline;
/* or, for 'blockness': */
display: inline-block;
}
Works in my FF3.6, but haven't tried it elsewhere. Also, the content of the ul must all be inline elements (or made to such).
122
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
