CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 3958

Placing HTML li side by side

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.

Upvotes: 1

Views: 3304

Answers (5)

Armen Mkrtchyan
Armen Mkrtchyan

Reputation: 921

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>

Upvotes: 1

loop
loop

Reputation: 21

<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>

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

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>

Upvotes: 0

jbutler483
jbutler483

Reputation: 24539

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

Upvotes: 0

matthew fletcher
matthew fletcher

Reputation: 66

Change your css to

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

ul.login li{
  display:inline;
  color:red;
}

Upvotes: 3

Related Questions