<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

回答

相關問題