Quiero mover uno de mis elementos li hacia la derecha, miré otras soluciones pero no funcionan. li.right{ text-align: right;} debería funcionar, pero ¿tal vez esté cancelado por CSS anterior?

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

Aquí está 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;
}
1
rtom 14 dic. 2016 a las 17:59

2 respuestas

La mejor respuesta

Es más limpio usar las clases bootstrap integradas, que están diseñadas para este propósito:

<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>
3
Stuart 14 dic. 2016 a las 15:08

Utilice la propiedad float:right

.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>
0
Prasath V 14 dic. 2016 a las 15:04