CODEWITHSUNDEEP
csstwitter-bootstrap
rtom
rtom

Reputation: 209

Align li element to right

I want to move one of my li elements to the right, i looked at other solutions but they are not working. li.right{ text-align: right;} should work, but maybe it is canceled by previous css ?

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div id="navbar container">
            <ul class="nav navbar-nav">
                <li><a href="#">Mac</a></li>
                <li><a href="#">Iphone</a></li>
                <li><a href="#">Ipad</a></li>
                <li><a href="#">Watch</a></li>
                <li class="right"><a href="#">Log In</a></li>
            </ul>
        </div>

    </nav>
</body>

Here is CSS

.navbar {
    min-height:32px !important
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}


.navbar{
  text-align: center;
  padding-top: 5px;
}

.navbar{
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
}

li.right{
    text-align: right;
}

Upvotes: 3

Views: 33356

Answers (2)

Stuart
Stuart

Reputation: 6795

It's cleaner to use the bootstrap built in classes, that are designed for this purpose:

<nav class="navbar navbar-default navbar-fixed-top">
    <div id="navbar container">
        <ul class="nav navbar-nav">
            <li><a href="#">Mac</a></li>
            <li><a href="#">Iphone</a></li>
            <li><a href="#">Ipad</a></li>
            <li><a href="#">Watch</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Log In</a></li>
        </ul>
    </div>
</nav>

Upvotes: 6

Prasath V
Prasath V

Reputation: 1356

Use the float:right property

.navbar {
    min-height:32px !important
}

.navbar .navbar-nav {
  list-style-type:none;
  float: none;
  vertical-align: top;
}


.navbar{
  text-align: center;
  padding-top: 5px;
}

.navbar{
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
}

li.right{
    float: right;
}
 <nav class="navbar navbar-default navbar-fixed-top">
        <div id="navbar container">
            <ul class="nav navbar-nav">
                <li><a href="#">Mac</a></li>
                <li><a href="#">Iphone</a></li>
                <li><a href="#">Ipad</a></li>
                <li><a href="#">Watch</a></li>
                <li class="right"><a href="#">Log In</a></li>
            </ul>
        </div>

    </nav>

Upvotes: 1

Related Questions