CODEWITHSUNDEEP
htmlcsshtml-listshorizontallist
ajax333221
ajax333221

Reputation: 11764

UL not staying in one single line

I tried what this said: How to style the UL list to a single line

display: inline;

and didn't work!

enter image description here

----------- My Code -----------

CSS:

*{
margin:0;
padding:0;
}

ul{
list-style:none;
}

#bottom_header{
background:#0F1923;
border-bottom:5px solid #0F67A1;
font-size:.95em;
font-weight:700;
height:31px;
padding:0 0 0 10px;
/*min-width:800px;*/
}

#bottom_header ul li{
font-size:.95em;
margin:0 0 0 6px;
padding:8px;
float:left;
display:inline;
}

#bottom_header ul li.active{
background:transparent url(./tab_left.png) no-repeat top left;
font-size:1.05em;
margin:-4px 0 auto 5px;
padding:0;
position:relative;
}

#bottom_header ul li.active a{
background:transparent url(./tab_right.png) no-repeat top right;
display:block;
margin:0 0 0 6px;
padding:10px 15px 10px 10px;
}

#bottom_header ul li.active,#bottom_header ul li.active a,#bottom_header ul li a:hover{
color:#fff;
text-decoration:none;
}

#bottom_header ul li,#bottom_header ul li a{
color:#aeaeae;
text-decoration:none;
}

HTML:

<div id="bottom_header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li class="left active"><a href="#">Active</a></li>
        <li><a href="#">Another</a></li>
    </ul>
</div>

Upvotes: 0

Views: 2614

Answers (2)

Developer-Sid
Developer-Sid

Reputation: 1382

ul > li{
   float: left;
}

OR

ul > li{
   display: inline;
}

Upvotes: -1

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could just float all the lis the to the left.

Actually, you are doing that.

Just set a width on the <div id="bottom_header"> so that it doesn't wrap.

For example:

#bottom_header{
    background:#0F1923;
    border-bottom:5px solid #0F67A1;
    font-size:.95em;
    font-weight:700;
    height:31px;
    padding:0 0 0 10px;
    width:800px;  /* ADD A WIDTH */
}

Example: http://jsfiddle.net/CtkrZ/

EDIT

As per your comment below:

edit: I set 100% width and didn't fix that (also it created an annoying horizontal line at all times on the whole page)

Remove the width from the div and add it to the ul. Give the ul an overflow:hidden; too.

ul{
    list-style:none;
    overflow:hidden;
    width:500px;   
}

#bottom_header{
    background:#0F1923;
    border-bottom:5px solid #0F67A1;
    font-size:.95em;
    font-weight:700;
    height:31px;
    padding:0 0 0 10px;
}

Updated Example: http://jsfiddle.net/CtkrZ/1/

Upvotes: 2

Related Questions