html - 导航栏右侧的移动渲染问题

Question

我有两个问题想通过导航栏的右侧来解决。

1) 我想让导航看起来像这样“登录|联系”- 目前两者之间没有分隔线，但是当我添加分隔线时，它不会在登录文本之后对齐。

2) 在手机上查看导航时。登录链接保留在正确的位置，但“联系”链接位于 Logo 下方。我如何让它沿着 Logo 排列>

这是我的 Boot : http://www.bootply.com/waaBbWFaI1

这是我的 HTML:

    <!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container topnav">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-brand">
            <img class="img-responsive" src="https://red.org/wp-content/plugins/a8c-stripe/img/red_logo.png" alt="Red Exchange">
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Login</a>|</li>
                <li><a href="#">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
    <!-- /.container -->
</nav>

Answer 1

嗯，首先我想像这样添加分隔线

<li><a href="#">Login</a>|</li> 

似乎是个坏主意..想象一下，您需要用于标签列表元素的空间，但它没有剩余空间..所以它所做的基本上就是将它放入下一个线..我建议你做一些类似的事情......给你的 anchor 标记元素(如果它包裹在一个 div 周围更好)一个右边的边框

另一个解决方案是:

  <li><a class="login" href="#">Login</a></li>
  <li>|</li>
  <li><a href="#">Contact</a></li>

这会在这些元素之间放置分隔线，但不在正确的位置，只需检查一下。要将它放在正确的位置，您必须在 css 之后给出每个列表元素。

ul {
    display: block;
    width: 100%;
    height: 100% // only if its already around a header
  li {
     display: inline-block;
     width: 15%; // each element gets 15% of the parents width
     height: 100;

  }
}

1. 学习 CSS，问题是如果不了解任何 CSS，您将无法如愿以偿地拥有您的网站。问题是，两者都是 block 元素 login 和 contact，如果你把它换行并且没有位置，因为字体大小太大并且元素占据了整个空间，它们将自动换行..到下一行。<

对不起，我希望你能理解我的英语。