Question

这是我到目前为止:(使用bootstrap）

 <body>
    <div class="container">
        <div class="page-header">
            <h1>Title <small>Secondary Text</small></h1>
            <ul class="nav nav-pills navbar-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>

页面标题创建一条水平线，我希望导航菜单位于该行上方，右侧对齐，左侧标题。出于某种原因，它一直低于水平线。

我尝试使用div container-fluid，但标题跳了起来，并没有停留在那一点的水平线上。

感谢所有帮助。谢谢。

Answer 1

您可以在.page-header上使用display: flex;将元素放在彼此旁边。

flex: 1;上的h1和.nav都会从视口宽度（50％）获得相同的空间量。当然，您可以根据需要调整此值。在小视口宽度上，您必须调整样式，例如媒体查询。

.page-header {
  display: flex;
}

h1,
.nav {
  flex: 1;
  vertical-align: top;
  margin-top: 0 !important;
}

.nav {
  text-align: right;
}

.nav.nav-pills>li {
  float: none;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header">
    <h1>Title <small>Secondary Text</small></h1>
    <ul class="nav nav-pills">
      <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>

Answer 2

标签包装是一个小问题。你已经将所有元素包装在页眉下。这是你的第一个错误。起始div必须是页头，然后是容器，其中存在h1和ul元素。

第二个错误是当你试图将元素拉到左边时。没有任何元素向右拉。因此，浏览器认为它是一个新行而不是同一个。因此，你需要用一个带左拉类的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>

（bootstrap）如何在与标题相同的行上对齐导航（徽标）

2 个答案: