Question

我的导航栏上有一些<li>。

这是我的HTML和CSS代码：

<nav class="navbar navbar-default navbar-fixed-top  navbar-centered" role="navigation">
<div class="container" style="position: relative">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll" href="#page-top">
            <img src="~/Images/logo.png" /></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
            <li class="hidden">
                <a class="page-scroll" href="#page-top"></a>
            </li>
            <li style="margin-left: 35px; margin-top: 10px;">
                <a class="page-scroll" href="#about">About Us</a>
            </li>
            <li style="margin-left: 35px; margin-top: 10px;">
                <a class="page-scroll" href="#services">Benefits</a>
            </li>
            <li style="margin-left: 35px; margin-top: 10px;">
                <a class="page-scroll" href="#contact">Contact</a>
            </li>

        </ul>

    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->

我需要添加两个<li>，但它需要位于导航栏右侧。

这样的事情：

我怎么能这样做？

Answer 1

您可以向其中添加另一个<ul>类navbar-right元素

<nav class="navbar navbar-default navbar-fixed-top  navbar-centered" role="navigation">
<div class="container" style="position: relative">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll" href="#page-top">
            <img src="~/Images/logo.png" /></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
            <li class="hidden">
                <a class="page-scroll" href="#page-top"></a>
            </li>
            <li style="margin-left: 35px; margin-top: 10px;">
                <a class="page-scroll" href="#about">About Us</a>
            </li>
            <li style="margin-left: 35px; margin-top: 10px;">
                <a class="page-scroll" href="#services">Benefits</a>
            </li>
            <li style="margin-left: 35px; margin-top: 10px;">
                <a class="page-scroll" href="#contact">Contact</a>
            </li>

        </ul>
        //this is the nav elments towards right
         <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Right Link1</a></li>
            <li><a href="#">Right Link 2</a></li>
          </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->

Answer 2

您可以在导航

上使用display flex

CSS
ul.nav{
  display:flex;
  align-items: flex-start;
}
ul.nav li.right{
  align-self: flex-end;
  color: red;
  border: 2px solid red;
}

HTML
ul.nav
  li*3 // normal links 
  li.right*2 // sign up links

Answer 3

keytool -exportcert -alias <alias_name> -keystore <keystore_file_path> | openssl sha1 -binary | openssl base64

如何在导航栏右侧添加两个<li>

3 个答案: