CODEWITHSUNDEEP
htmlcss
Syed
Syed

Reputation: 33

Float a navbar <li> element to right

i need to float my a elements inside a li tag to the right. Here below i have attached HTML and CSS file please have a look. I need a navbar with elements floated to left.

* {
  margin: 0px;
  padding: 0px;
}

div.nav {
  background-color: #009866;
  padding: 10px;
}

.nav ul {
  list-style-type: none;
}

.nav li {
  float: right;
}
<header>
  <div class="nav">
    <ul class="navbar">
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
</header>

Upvotes: 1

Views: 1927

Answers (2)

AmerllicA
AmerllicA

Reputation: 32502

Actually, I didn't read your code, But why float? you can use flex instead of float. it is really easy to understand, and float layout with display: block wrapper and children need a complex concept that name is clearfix. it is so hard to understand.

Write your codes like below:

<!DOCTYPE html>
<html>
<head>
    <title>Web Project</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
            direction: rtl;
        }

        .navbar {
            list-style-type: none;
            background-color: #009866;
            padding:10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        li {
            margin: 0 10px;
        }
        li:first-child {
            margin-right: 0;
        }
        li:last-child {
            margin-left: 0;
        }
    </style>
</head>
<body>

<header>
    <ul class="navbar">
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>
</header>

</body>
</html>

But if you insist on using float, ok, use the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Web Project</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
            direction: rtl;
        }

        .clearfix:after {
            content:'';
            display: table;
            clear: both;
        }

        .navbar {
            list-style-type: none;
            background-color: #009866;
            padding:10px;
            display: block;
            justify-content: flex-start;
            align-items: center;
        }
        li {
            margin: 0 10px;
            display: inline-block;
            float: right;
        }
        li:first-child {
            margin-right: 0;
        }
        li:last-child {
            margin-left: 0;
        }
    </style>
</head>
<body>

<header>
    <ul class="navbar clearfix">
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign Up</a></li>
    </ul>
</header>

</body>
</html>

Hope these codes help you.

Upvotes: 1

Gerard
Gerard

Reputation: 15786

Easiest is to use a flexbox. You can align your items to the right with justify-content

* {
  margin: 0px;
  padding: 0px;
}

div.nav {
  background-color: #009866;
  padding: 10px;
}

.nav ul {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
}
<header>
  <div class="nav">
    <ul class="navbar">
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>
  </div>
</header>

Upvotes: 1

Related Questions