Html （引导）如何将导航与标题（徽标）对齐在同一行上
这就是我到目前为止所做的：（使用bootstrap）Html （引导）如何将导航与标题（徽标）对齐在同一行上,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,这就是我到目前为止所做的：（使用bootstrap） 标题辅助文本 页面标题创建了一条水平线，我希望导航菜单位于该线上方，右边对齐，左边对齐标题。由于某种原因，它一直低于水平线 我尝试使用div container流体，但是标题跳了起来，并没有停留在水平线上 感谢所有的帮助。谢谢。您可以在页面标题上使用将元素放置在彼此相邻的位置 具有flex:1李{ 浮动：无； 显示：内联块； } 标题辅助文本 标签包装有一个小问题。您已将所有元素包装在页眉下。这是您的第一个错误。
标题辅助文本
页面标题上使用将元素放置在彼此相邻的位置
具有flex:1onh1
和.nav
都从视口宽度获得相同的空间量（50%）。当然，您可以根据需要调整此值。在小视口宽度上，您必须调整样式，例如使用媒体查询
。页眉{
显示器：flex；
}
h1，
.导航{
弹性：1；
垂直对齐：顶部；
页边距顶部：0！重要；
}
.导航{
文本对齐：右对齐；
}
.nav.nav药丸>李{
浮动：无；
显示：内联块；
}
标题辅助文本
标签包装有一个小问题。您已将所有元素包装在页眉下。这是您的第一个错误。起始div必须是页眉，然后是包含h1和ul元素的容器
第二个错误是当你试图向左拉元素时，没有向右拉的元素。因此，浏览器认为它是一个新行，而不是同一行。因此，您需要使用类pull left的div来包装h1
这将符合你的愿望
<body>
<div class="page-header">
<div class="container">
<div class="pull-left">
<h1>Title <small>Secondary Text</small></h1>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
标题辅助文本
谢谢！这有帮助。我试图找出如何增加导航和标题之间的距离，使导航更向右。有什么办法可以这样做吗？编辑：算出了，在.nav css上留有空白。谢谢你的帮助！是的，这是可能的，更新了我的答案。您必须以更高的特异性覆盖引导样式，并使您的nav非浮动且显示：内联块
。现在您可以在父项上设置text align:right
，您的导航元素应该向右对齐。h1中的辅助文本不是我的选择（SEO方面）。除此之外，回答得很好！我只是回答了解决这个问题的可能和简单的方法。h1元素不是我改的，和用户给的一样。啊。。。我懂了！[竖起大拇指]这听起来可能是个愚蠢的问题（因为我对html/css/bootstrap还不熟悉），但我不明白为什么容器会跟在你的第一个div类后面？你能解释一下吗？感谢PageHeader div是bootstrap中的一个类，它只是告诉html，每当使用一个PageHeader类时，都会创建一个空间和底线。基本上，它告诉你，你需要创建一个页眉。之后，我将使用容器类，因为容器类是实际的div类，它封装了其中的所有h1和div元素，而不是页面标题。
<body>
<div class="page-header">
<div class="container">
<div class="pull-left">
<h1>Title <small>Secondary Text</small></h1>
</div>
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>