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.
Change your css to
ul.login {
margin:0;
width:600px;
height:60px;
list-style:none!important;
}
ul.login li{
display:inline;
color:red;
}
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>
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 (ie extra div tags/etc). But i've removed this for you
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>
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.