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.

Community
  • 1
  • 1
Alex
  • 3,730
  • 9
  • 43
  • 94

5 Answers5

3

Change your css to

ul.login {
  margin:0;
  width:600px;
  height:60px;
  list-style:none!important;
 }

ul.login li{
  display:inline;
  color:red;
}
matthew fletcher
  • 66
  • 6
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>
Armen Mkrtchyan
  • 921
  • 1
  • 13
  • 34
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

jbutler483
  • 24,074
  • 9
  • 92
  • 145
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>
Sarath
  • 2,318
  • 1
  • 12
  • 24
  • move your `list-style` into your `ul.login li` definition, and then you can remove the dreadful `!important` tag – jbutler483 Mar 06 '15 at 13:44
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>
loop
  • 21
  • 2