<nav><header> CSS

首先，我通过使用框架了解了大部分关于CSS/HTML的知识。我想回去学习基础知识来理解CSS选择器和继承。<nav><header> 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

来源

2014-08-27 AyeZee33

什么是实际问题？你面临什么问题？ – crush 2014-08-27 19:07:00

有什么问题？ – 2014-08-27 19:07:40

立即尝试添加照片[链接] http://www.cantaloupecreative.info/questions/headerissue。JPG – AyeZee33 2014-08-27 19:11:15

浮动的导航元素，使父容器认为它不存在，所以它有效地收缩。要恢复你后的行为，加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）

来源

2014-08-27 19:20:01 j08691

感谢您的回复。我想我明白你在说什么。你能不能告诉我如何将

等于H1以什么方式？你是指我的答案中的第二个小提琴例子吗？ – j08691 2014-08-27 19:32:07

是的内联工作完美。谢谢。 – AyeZee33 2014-08-27 23:06:57

添加

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并排我也将NAV之后添加一个

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

所以灰色背景将包括h1和NAV

来源

2014-08-27 19:25:26 mathius1

我希望我可以upvote这两个答复。完善。非常感谢和@ j08691 – AyeZee33 2014-08-27 19:27:15

您必须将显示设置为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/

来源

2014-08-27 19:29:33

简单的话

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>

来源

2017-05-09 18:54:17 ngCourse

<nav><header> CSS

回答

相关问题