将 <nav> 与 <header> CSS 内联答案

【问题标题】：Putting <nav> inline with <header> CSS将 <nav> 与 <header> CSS 内联
【发布时间】：2014-08-27 19:05:48
【问题描述】：

首先，我通过使用框架学到了我所知道的关于 CSS/HTML 的大部分知识。我正在尝试回过头来学习基础知识以了解 CSS 选择器和继承。

我在 W3C 上读到过，两者都是标题的良好语义标记。所以我要做的是创建一个带有向左浮动的徽标和向右浮动的导航菜单的标题。问题是我的导航菜单就在我的标题下方。我想让这个响应。这是我到目前为止所拥有的。

<body>
<header>
    <h1>Testing</h1>
        <nav>
            <ul>
                <a href=""><li>Home</li></a>
                <a href=""><li>About</li></a>
                <a href=""><li>Contact</li></a>
            </ul>
        </nav>
</header>

CSS如下

header {
    position:relative;
    display:block;
    max-width:100%;
    height:100%;
    margin:0 auto;
    padding:1rem 5rem;
    background:#cccccc;
    color:#fff;
}
header h1 {
    line-height: 45px;
    font-size: 2rem;
    margin: 0; 
}
nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    float:right;
}

nav  li {
    position:relative;
    display:inline-block;
    list-style-type: none;
    font-family: "Open Sans", "Droid Sans", Helvetica, Arial, sans-serif;
    color: #222;
    padding:0 1rem;
}
nav li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
nav > li > a:hover,
nav > li > a:focus {
    text-decoration: none;
    background-color: #eee;
}

JSFiddle

【问题讨论】：

真正的问题是什么？你面临什么问题？
有什么问题？
现在尝试添加照片[链接]cantaloupecreative.info/questions/headerissue.JPG

标签： html css header nav

【解决方案1】：

您必须将 display 设置为 inline for 和。您更新后的 CSS 将是：

  header h1 {
    line-height: 45px;
    font-size: 2rem;
    margin: 0;
    display:inline;
}
nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    float:right;
    display:inline;
}

您也可以查看：http://jsfiddle.net/2g763j9t/

【讨论】：

【解决方案2】：

添加

display: inline;
float: left;

到标题 h1

header h1 {
    line-height: 45px;
    font-size: 2rem;
    margin: 0; 
    display: inline;
    float: left;
}

http://jsfiddle.net/sncb91t8/

这将使 h1 和 nav 并排我还添加了一个

<div style="clear: both"></div>

在导航之后，因此灰色背景将包含 h1 和导航

【讨论】：

我希望我能对这两个回复都投赞成票。完美的。非常感谢@j08691

【解决方案3】：

浮动导航元素会使父容器认为它不存在，因此它有效地缩小了。要恢复您所追求的行为，请将overflow:auto; 添加到header：

header {
    position:relative;
    display:block;
    max-width:100%;
    height:100%;
    margin:0 auto;
    padding:1rem 5rem;
    background:#cccccc;
    color:#fff;
    overflow:auto;
}

jsFiddle example

如果您想让它们对齐得更好一点，只需将 h1 移到导航后 (jsFiddle)

【讨论】：

感谢您的回复。我想我明白你在说什么。您能否就如何在标题中定位
提供建议。我知道我可以添加边距和填充，但是有没有办法让它等于我在标题中的 H1？我知道这有点超出了这个问题的范围，但任何方向都会有所帮助。
以什么方式等于H1？您指的是我回答中的第二个小提琴示例吗？

【解决方案4】：

简单来说

在 index.html 中添加以下代码

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

并将以下代码添加到您的 html 中

<header id="header" style="position: fixed;height: auto; width: 100%; z-index: 9999;" >
<div class="top-bar">

<nav class="navbar navbar-inverse" role="banner" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
 <a class="navbar-brand page-scroll " href="#page-top"> </a>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<b>Ngcourse</b>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" style="height: 64px;" alt="logo"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="active"><a href="#">Videos</a></li>
<li class="active"><a href="#">Courses</a></li>
<li class="active"><a href="#">Earning</a></li>
<li class="active"><a href="#">Youtube</a></li>
<li class="active"><a href="#">Blogs</a></li>
<li class="active"><a href="#">Events</a></li>
<li  class="active"><a href="#service" > Our Services</a></li>
<li  class="active"><a href="#about1"  >Contact Us </a></li>
</ul>
</div>
</div> 
</nav> 
</div>
</header>

【讨论】：