I am trying to create a image slider based on a <ul>.
The problem is that the <li> are not displayed inline-block.
I already tried this:
.slider ul li {
display: inline;
float: left;
white-space: nowrap;
}
But that doesn't work. I also tried display:inline-flex; but no result.
An other thing I tried is to replace the <li> by a <div> but that to without any result.
Jsfiddle
I normally works so I don't know why it doesn't work this time.
So can somebody help me fixing this problem?
You need to add white-space: nowrap to the parent element; in this case, the ul.
In addition, the white-space property won't have an effect on the floated elements, therefore you need to remove float: left.
Updated Example
.slider ul {
white-space: nowrap;
}
.slider ul li {
display: inline-block;
}
Related
I cant figure out why my list is not vertically aligned. I set ul and li to be 100% height of parent, but it seems to be only 100% of itself.
I dont want to use any margin or padding to make them vertically aligned. How can I force it to be 100% of parent so it would be vertically in the middle?
http://jsfiddle.net/qS5A6/
#nav li a{
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 15px 20px;
line-height:90px; //add this
}
defining your height relative to the parten usually just works with elements that have position:absolute. The reason is, that the height of surrounding elements is usually determined by their children. If you make the childrens height relative to the parent you have an endless loop :)
So using this code would make your li have 100% height but the height of your #nav won't change anymore with increasing length of the ul.
http://jsfiddle.net/qS5A6/5/
Using display: table instead of your inline-block approach would keep that functionality
http://jsfiddle.net/qS5A6/6/
Maybe you can use table-cell for li:
#nav ul{
display: table;
height: 90px;
}
#nav li{
display: table-cell;
height: 100%;
vertical-align: middle;
}
this works fine for ie8+
if you use:
#nav li a{
line-height:90px;
}
there is some problem, you can't have more, than one line in the tag
Is there any way to align the images vertically in LIST ITEM using CSS only?
The I have a slider (slowed down) that needed to be aligned vertically in a 500px-height LI
The site is in http://210.48.94.218/~printabl/design/portfolio/.
Your help is greatly appreciated.
Assuming your list items have a fixed height, you can use line-height combined with vertical-align: middle to do this.
Example:
ul li {
display: block;
height: 500px;
line-height: 500px;
}
ul li img {
vertical-align: middle;
}
Working example here.
This is a use case for Flexbox:
ul {
display: flex;
align-items: center;
}
(use vendor prefixes where necessary depending on your browser; see http://caniuse.com/#feat=flexbox)
And then remove height: 500px from .soliloquy-item.
I'm currently really busy working on a simple jQuery slideshow, but I've got the following problem, when I make my slides a fixed width like:
#slider ul {
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
}
#slider ul li {
float:left;
height: 100%;
width:200px;
}
It all works fine; but when I want to make my slider full-screen. So Instead of width 200
width:100%;
All the li's get displayed beneath each other instead of next to each other. I hope I provided enough information.
If the width is 100% the li element occupies the full width of its parent container, meaning there's no room for another li element to occupy the same line; the width explicitly forces the next sibling to the next line.
To work around this, one option, given the following mark-up:
<ul>
<li>
<img src="http://lorempixel.com/500/500/nightlife/Some%20sample%20text" />
</li>
<li>
<img src="http://lorempixel.com/500/500/sports/Some%20sample%20text" />
</li>
</ul>
Is to use:
ul {
white-space: nowrap;
}
li,
img {
width: 100%;
}
li {
display: inline-block;
}
JS Fiddle demo.
Which forces the ul to keep elements in a single 'line', assigns a 100% width to the li and img elements, and displays the li elements as in-line.
I'm trying to create a horizontal menu for my webisite. It's not that difficult, but I'm running into two problems, which brake my design.
I can do it in two ways:
1). by setting
#menu li {
display: inline-block;
}
like I did here: http://jsfiddle.net/l0ner/HPpgG/.
It works and looks like I want but there is a white space between each element, which breaks the design. I could remove the space by putting all list elements in one line, but it's not exactly an elegant solution.
I know I could set the <ul> font size to 0, and then restore it in <li> but it feels too much like a dirty hack to me, and I'd like to keep the css 'magic' minimal.
How do I remove those spaces?
2). by setting
#menu li {
display: block;
float: left;
}
Like I did here: http://jsfiddle.net/l0ner/HPpgG/1/
But like this the <div> container collapses and I loose the white background for the menu, which makes whole thing unreadable.
How I can make the container uncollpased?
Here is the working jsfiddle
#menu ul {
margin: 0;
padding: 0;
overflow:auto;
}
#menu li {
float: left;
list-style:none;
}
You need to set the overflow of the ul to auto or hidden
For your first example, the white space in between the li elements is literally caused by white space in your HTML - the line breaks in between your </li> and <li> tags. If you remove this, the white space will go away.
Alternatively, for your second example, you can stretch the parent element to 'clear' the floated elements. There are a couple of ways to do this (google 'clearfix' for a few examples), but the easiest way would be to use overflow: hidden on the parent element.
Just make the 'overflow' of your <div> hidden.
#menu {
background: #fff;
color: #000;
overflow:hidden;
}
Fiddled here
You can use a pseudo-element to do a clearfix on the <ul> without additional markup
jsFiddle
#menu ul:after {
clear:both;
content:"";
display:block;
}
You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/
I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.
Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items that I'd like to get rid of.
Is this possible? Thanks for any help.
I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.
Example
CSS
ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
jsFiddle.
jsFiddle with one more li, you'll notice the CSS is constant :P