Question

我正在开发一个项目（使用bootstrap），我似乎无法弄清楚为什么我的导航仍然堆叠而不是水平放置。我已经尝试了我能想到的一切，甚至在网上寻求帮助，我正在学习编码，但他们也无法弄清楚。他们告诉我它应该工作，事实上它确实在他们的代码编辑器中工作，它只是在我的计算机上工作，这是文件所在的位置，因为我没有网络托管，我只是在学习。我还注意到，在我的浏览器中，导航向右工作，链接位于右侧（尽管它们仍然不是水平的）但是当我在这里运行时，它显示“运行代码片段”，导航显示正确在img占位符下面，不知道这是否意味着什么，但我认为我会包含那些信息。

header nav ul{
	display: inline-block;
}

<header>
 <div class="container">
	<div class="row">
	<img id="logo" src="http://placehold.it/150x150">
	<nav>
	<ul class="nav pull-right">
		<li><a href="#" class="btn-default">About</a></li>
		<li><a href="#" class="btn-default">Projects</a></li>
		<li><a href="#" class="btn-default">Contact</a></li>
	</ul>
	</nav>
	</div>
 </div>	
</header>

enter image description here

Answer 1

您的意思是想让导航水平对齐吗？

然后你可以尝试使用这个

header nav ul li {
    display: inline-block;
}

工作示例here。

您的方法不起作用的原因是因为您应用于ul而不是li元素。

我的导航不会显示为内嵌块

1 个答案: