我的导航栏是垂直的,但不会水平移动
问题描述:
由于某些原因,我一直无法制作导航栏。我试着看看这里有没有答案或上网,但没有运气。我错过了什么或有冲突吗?我的导航栏是垂直的,但不会水平移动
html, body {
margin: 0;
padding: 0;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.jumbotron {
background: url(../img/bg.jpg) no-repeat center center;
background-size: cover;
height: 800px;
}
.header {
background-color: #333;
}
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li a {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
<div class="header">
<div class="container">
<ul class="nav" role="navigation">
\t \t <li><a href="#">About</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Reading</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
答
我给你做一个plunker为example。你非常接近。您只需将.nav li
选择器上的display
属性设置为inline-block
即可。
.nav li {
display:inline-block;
}
这张海报实际上是在寻找一个Bootstrap解决方案,但没有标记为这样的问题。这里是一个Bootstrap example。它只使用每个li
标签上的pull-left
类。
<ul class="nav" role="navigation">
<li class="pull-left"><a href="#">About</a></li>
<li class="pull-left"><a href="#">Photography</a></li>
<li class="pull-left"><a href="#">Programming</a></li>
<li class="pull-left"><a href="#">Writing</a></li>
<li class="pull-left"><a href="#">Reading</a></li>
<li class="pull-left"><a href="#">Contact</a></li>
</ul>
答
在你的CSS,尝试添加
.nav li {
display: inline;
}
贵丽元素自然地,嵌段显示,所以这应该继续前进,从它们之间除去休息。
答
查看下面的固定代码片段。您需要将display: inline;
添加到li
元素以使它们变为水平。
li {
display: inline;
}
html, body {
margin: 0;
padding: 0;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.jumbotron {
background: url(../img/bg.jpg) no-repeat center center;
background-size: cover;
height: 800px;
}
.header {
background-color: #333;
}
.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;
}
.nav li a {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;
}
<div class="header">
<div class="container">
<ul class="nav" role="navigation">
\t \t <li><a href="#">About</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Reading</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
答
添加属性.nav li
内联显示。
.nav li{
display: inline;
}
我正在使用引导程序,它可以工作,但我必须删除CDN链接来禁用引导程序。你有任何想法,为什么它不起作用? –
要使用引导程序获得相同的结果,请将'pull-left'类添加到菜单中的每个'li'标记。我在这里使用bootstrap方法做了一个更新的示例:https://plnkr.co/edit/uS3b0Jqo1VgLAFDzdPL5?p=preview将来如果您正在寻找引导程序的答案,请记住标记bootstrap。 –