我有两个问题想通过导航栏的右侧来解决。
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>
最佳答案
嗯,首先我想像这样添加分隔线
<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;
}
}
- 学习 CSS,问题是如果不了解任何 CSS,您将无法如愿以偿地拥有您的网站。 问题是,两者都是 block 元素 login 和 contact,如果你把它换行并且没有位置,因为字体大小太大并且元素占据了整个空间,它们将自动换行..到下一行。<
对不起,我希望你能理解我的英语。
关于html - 导航栏右侧的移动渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37624976/