1

I have the following (minimised) HTML:

<html> <head> <style type="text/css"> .wrap { float:right; } ul.login { margin:0; width:140px; height:60px; list-style:none!important; } ul.login li{ float:left; color:red; } </style> </head> <body> <div class="wrap" > <ul class="login"> <li>Logged in as </li> <li><a>Ghost Out</a></li> <li><a>Admin Home</a></li> <li><a>Alumni Home</a></li> <li><a>Your profile</a></li> <li><a>Log out</a></li> <li><a>to your profile</div></div></a></li> </ul> </ul> </div> </body> </html>

Which according to this tutorial: How do I render <li> side-by-side?

should make the li's display side by side.

As far as I can see I have implemented it correctly, but it is not working. Have I made a mistake, am I missing something or is there a reason this is not working?

PS I want it to start from the right hand side.

Improve this question
2
  • you have invalid html - extra closing ul, extra closing divs in the last li Commented Mar 6, 2015 at 13:40
  • your .login element is 140px wide. It cannot fit all the li elements in a single line.. Commented Mar 6, 2015 at 13:43

5 Answers 5

Reset to default
3

Change your css to

ul.login { margin:0; width:600px; height:60px; list-style:none!important; } ul.login li{ display:inline; color:red; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

remove width property from ul.login css and remove second closing </ul> tag

<head> <style type="text/css"> .wrap { float:right; } .login { margin:0; height:60px; list-style-type: none; } .login li { float:left; color:red; display: inline; margin-right:10px; } </style> </head> <body> <div class="wrap" > <ul class="login"> <li>Logged in as </li> <li><a>Ghost Out</a></li> <li><a>Admin Home</a></li> <li><a>Alumni Home</a></li> <li><a>Your profile</a></li> <li><a>Log out</a></li> <li><a>to your profile</div></div></a></li> </ul> </div> </body> </html>
Improve this answer

Comments

0

You could always use positioning instead (which IMO would be better than floating elements):

.wrap { position: absolute; top: 5px; right: 5px; } .wrap .login { list-style: none; display: inline-block; } .wrap .login li { display: inline-block; }
<html> <body> <div class="wrap"> <ul class="login"> <li>Logged in as</li> <li><a>Ghost Out</a> </li> <li><a>Admin Home</a> </li> <li><a>Alumni Home</a> </li> <li><a>Your profile</a> </li> <li><a>Log out</a> </li> <li><a>to your profile</a> </li> </ul> </div> </body> </html>

Note

As you said that you had removed a lot of the markup, I presumed that some of your syntax errors were due to this (i.e. extra div tags/etc). But i've removed this for you

Improve this answer

Comments

0

try this one..

.wrap { float:right; } ul.login { margin:0; width:600px; height:60px; list-style:none!important; } ul.login li{ display:inline; color:red; }
<html> <head> </head> <body> <div class="wrap" > <ul class="login"> <li>Logged in as </li> <li><a>Ghost Out</a></li> <li><a>Admin Home</a></li> <li><a>Alumni Home</a></li> <li><a>Your profile</a></li> <li><a>Log out</a></li> <li><a>to your profile</div></div></a></li> </ul> </div> </body> </html>

Improve this answer

1 Comment

move your list-style into your ul.login li definition, and then you can remove the dreadful !important tag
0 
<style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a { display: block; width: 60px; background-color: #dddddd; } </style> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.