CODEWITHSUNDEEP
csscss-floathtml-lists
Irfan Mir
Irfan Mir

Reputation: 2175

Horizontal list not going inline / in one line

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>

Upvotes: 0

Views: 1365

Answers (3)

falsarella
falsarella

Reputation: 12447

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/

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

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>

Upvotes: 4

Nitesh
Nitesh

Reputation: 15779

Add a float:left to #slides li

#slides li{float:left;}

Hope this helps.

Upvotes: 1

Related Questions