html – (bootstrap)如何在与标题相同的行上对齐导航(徽标)_html-js-css

概述这是我到目前为止:(使用bootstrap) <body> <div class="container"> <div class="page-header"> <h1>Title <small>Secondary Text</small></h1> <ul class="nav nav-pills navbar-right"> 这是我到目前为止:(使用bootstrap)

<body>    <div >        <div >            <h1>Title <small>Secondary Text</small></h1>            <ul >                <li ><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,但标题跳起来并没有停留在那一点的水平线上.

所有帮助表示赞赏.谢谢.

解决方法您可以在.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 >  <div >    <h1>Title <small>Secondary Text</small></h1>    <ul >      <li ><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>

总结

以上是内存溢出为你收集整理的html – (bootstrap)如何在与标题相同的行上对齐导航(徽标)全部内容，希望文章能够帮你解决html – (bootstrap)如何在与标题相同的行上对齐导航(徽标)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1074778.html

html – (bootstrap)如何在与标题相同的行上对齐导航(徽标)

发表评论

评论列表（0条）