将li元素右对齐

Question

将li元素右对齐

3

我想将我的一个li元素向右移动，我查看了其他解决方案，但它们都不起作用。 li.right{ text-align: right;} 应该可以实现，但是可能被之前的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>

这里是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;
}

- rtom

你想让其他元素保持居中吗？ - roberrrt-s

请提供一个可行的例子。在此之前，因为您使用了Bootstrap，可以尝试将pull-right类添加到要对齐的li元素中。 - Expressingx

如果你想要它靠右，为什么要居中呢？.navbar{ text-align: center; padding-top: 5px; } - j08691

我将它居中是因为我希望其他元素也处于中心位置。 - rtom

2个回答

0

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

- Prasath V

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stuart · Accepted Answer

使用Bootstrap内置的专门设计的类更加清晰：

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