将li元素对齐

时间:2016-12-14 14:59:28

标签: css twitter-bootstrap

我想将我的一个元素移到右边,我看了其他解决方案,但它们没有用。 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;
}

2 个答案:

答案 0 :(得分:2)

使用专为此目的而设计的内置类引导程序更简洁:

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

答案 1 :(得分:0)

使用float:right属性

&#13;
&#13;
.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;
}
&#13;
 <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>
&#13;
&#13;
&#13;