Horizontal list not going inline / in one line - css

Question

I'm trying to make a horizontal list where each of the <li>s in the list have a height of 385px and a width of 400px.
I tried making the list horizontal by using inline-block, but that doesn't seem to be working.
By which, I mean the list is still vertical. The <li>s are the right size, but the list is not horizontal.
How can I make this list horizontal? (Preferably without flexbox)
Here is my CSS:
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:400px;
display:inline-block;
}
and my HTML:
<form action="" method="get">
<fieldset>
<ul id="slides">
<div id="first">
<li>
1
</li>
</div>
<div id="second">
<li>
2
</li>
</div>
<div id="last">
<li>
3
</li>
</div>
</ul>
</fieldset>
</form>

Answer 1

You are making it totally wrong, you are using div which are block level element, also you cannot use any other element except li inside ul, so your markup is invalid, instead do it like this
<ul>
<li><div>A</div></li>
<li><div>B</div></li>
</ul>
<style>
ul li {
display: inline-block;
}
</style>

Answer 2

Add a float:left to #slides li
#slides li{float:left;}
Hope this helps.

Answer 3

Remove the divs and float the lis to the left:
HTML
<form action="" method="get">
<fieldset>
<ul id="slides">
<li id="first">1</li>
<li id="second">2</li>
<li id="third">3</li>
</ul>
</fieldset>
</form>
CSS
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:40px;
display:inline-block;
float: left;
}
http://jsfiddle.net/X6LkZ/1/