0

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?

Vinc199789
  • 1,046
  • 1
  • 10
  • 31
  • 1
    Why not setting display: inline-block for li ? – Skoua Mar 06 '15 at 17:30
  • 2
    Floating converts *any* inline-level box into its block-level equivalent. This means not only does inline (and inline-block) become block, but also inline-flex becomes flex. – BoltClock Mar 06 '15 at 17:30
  • for start, a floating an element automatically makes it into a box, so go with float or with inline, not both ! – Mat Mar 06 '15 at 17:32

1 Answers1

3

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;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • That works but now I have a small white space between the images? I used the `float:left` for that so How can I fix that? – Vinc199789 Mar 06 '15 at 17:36
  • @Vinc199789 For the space between the elements, [see this answer](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038859#19038859). Here is an updated example http://jsfiddle.net/wdg1fqg8/ – Josh Crozier Mar 06 '15 at 17:37