Question

首先，我通过使用框架学习了大部分关于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

Answer 1

您必须将显示设置为内联和。您更新的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/

Answer 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和nav

Answer 3

浮动nav元素会使父容器认为它不存在，因此它会有效缩小。要恢复您所追求的行为，请将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）

Answer 4

用简单的词语

在index.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>

并将以下代码添加到您的HTML

{{1}}

将<nav>与<header> CSS </header> </nav>放在一起

4 个答案: