Question

我有两个问题，我试图用导航栏的右侧解决。

1）我希望导航看起来像这样＆＃34;登录|接触＆＃34; - 目前中间没有分隔符，但是当我添加分隔线时，它在登录文本后不会排成一行。

2）在移动设备上查看导航时。登录链接保持在正确的位置，但是＆＃34;联系人＆＃34;链接落在徽标下方。如何将其与徽标的一侧＆gt;

联系起来

这是我的bootply： 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

好吧，首先我想像这样添加Divider

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

似乎是一个坏主意..想象你需要你正在使用的空间用于标签的列表元素，它没有任何空间。所以它的作用基本上是它，把它放到下一个线.. 我建议你做一些像...给你的锚标签元素（如果它将缠绕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;

  }
}

学习CSS，问题是如果不知道任何CSS，您将无法拥有您的网站，如您所愿。问题是，两者都是块元素登录和联系，如果你包装它并且没有地方因为font-size太大而元素占用整个空间，它们将自动换行到下一行。

导航条右侧的移动渲染问题

1 个答案: