导航栏和标题合并

Question

我试图找出一种方法，使我的导航栏和标题标题成为对方的一部分。换句话说，我希望我的标题文本位于导航栏或其一部分的顶部，以及导航栏和标题文本都固定在页面顶部进行滚动。我一直在玩，并没有得到任何地方。我真的不知道如何控制它的CSS和HTML。

header { 
 
    /*insert something here?*/ 
 
} 
 

 
nav { 
 
    background-image: url("header.jpg"); 
 
    background-position: center; 
 
    padding: 1%; 
 
    overflow: hidden; 
 
} 
 

 
nav a { 
 
    float: left; 
 
    display: block; 
 
    color: orange; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size 17px; 
 
    font-family: helvetica; 
 
    letter-spacing: 2px; 
 
} 
 

 
nav li, 
 
nav ul { 
 
    list-style: none; 
 
} 
 

 
nav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
nav .material-icons { 
 
    display: none; 
 
    font-size: 36px; 
 
    color: blue; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    nav a:not(:first-child) { 
 
    display: none; 
 
    } 
 
    nav .material-icons { 
 
    float: left; 
 
    display: block; 
 
    } 
 
}

<header> 
 
    Knox Enterprises Inc. 
 
    <nav> 
 
    <i class="material-icons">menu</i> 
 
    <a href="index.html">Home</a> 
 
    <a href="About.html">About</a> 
 
    <a href="Contact.html">Contact</a> 
 
    </nav> 
 
</header>

Answer 1

我会做headerdisplay: flex和使用justify-content: space-between将它们分开 - 或者你可以删除文本和资产净值是并排侧左边，或justify-content: center放他们在中心或justify-content: flex-end把他们放在右边。将文本置于h1或其他更合适的元素中，然后添加position: fixed; width: 100%以将其固定在页面的顶部。

body { 
 
    min-height: 500vh; 
 
    background: #eee; 
 
    margin: 0; 
 
} 
 
header { 
 
    display: flex; 
 
    justify-content: center; 
 
    position: fixed; 
 
    width: 100%; 
 
    background: #fff; 
 
    align-items: center; 
 
} 
 

 
nav { 
 
    background-image: url("header.jpg"); 
 
background-position: center; 
 
     padding: 1%; 
 
     overflow: hidden; 
 
position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    } 
 

 
@media (max-width: 900px) { 
 
    nav { position: static; transform: translateY(0); } 
 
    header { justify-content: space-between; } 
 
} 
 

 
    nav a { 
 
     float: left; 
 
     display: block; 
 
     color: orange; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
     font-size 17px; 
 
     font-family: helvetica; 
 
     letter-spacing: 2px; 
 
    } 
 

 
    nav li, nav ul{ 
 
     list-style: none; 
 
    } 
 

 
    nav a:hover { 
 
     background-color: #ddd; 
 
     color: black; 
 
    } 
 

 
    nav .material-icons { 
 
     display: none; 
 
     font-size: 36px; 
 
     color: blue; 
 
    } 
 

 
    @media screen and (max-width: 600px) { 
 
     nav a:not(:first-child) {display: none;} 
 
     nav .material-icons { 
 
     float: left; 
 
     display: block; 
 
     } 
 
    } 
 
htmlcss

<header> 
 

 
     <nav> 
 
      <i class="material-icons">menu</i> 
 
      <a href="index.html">Home</a> 
 
      <a href="About.html">About</a> 
 
      <a href="Contact.html">Contact</a> 
 
     </nav> 
 
     
 
     <h1>Knox Enterprises Inc.</h1> 
 

 
    </header>

Answer 2

header>div { 
 
\t display:inline; 
 
\t float:left 
 
     /*insert something here?*/ 
 
    } 
 

 
    nav { 
 
\t display:inline; 
 
\t width:auto; 
 
     background-image: url("header.jpg"); 
 
     background-position: center; 
 
     padding: 1%; 
 
     overflow: hidden; 
 
    } 
 

 
    nav a { 
 
     float: left; 
 
     display: block; 
 
     color: orange; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
     font-size 17px; 
 
     font-family: helvetica; 
 
     letter-spacing: 2px; 
 
    } 
 

 
    nav li, nav ul{ 
 
     list-style: none; 
 
    } 
 

 
    nav a:hover { 
 
     background-color: #ddd; 
 
     color: black; 
 
    } 
 

 
    nav .material-icons { 
 
     display: none; 
 
     font-size: 36px; 
 
     color: blue; 
 
    } 
 

 
    @media screen and (max-width: 600px) { 
 
     nav a:not(:first-child) {display: none;} 
 
     nav .material-icons { 
 
     float: left; 
 
     display: block; 
 
     } 
 
    }

<header> 
 
     <div>Knox Enterprises Inc.</div> 
 
\t \t 
 
     <nav> 
 
      <i class="material-icons">menu</i> 
 
      <a href="index.html">Home</a> 
 
      <a href="About.html">About</a> 
 
      <a href="Contact.html">Contact</a> 
 
     </nav> 
 
\t \t 
 
    </header>

Answer 3

您的权利置于header文字和导航，但是，为了便于操作使用css文本的位置应该放在在div,p或span内。

为了让您的标题滚动到页面顶部有position: fixed。使用它时，不要忘记给头的父母（例如body）position: relative。

body { 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
header { 
 
    position: fixed; 
 
    background-color: #bbc; 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100px; 
 
    line-height: 50px; 
 
    box-sizing: border-box; 
 
    padding: 0 16px; 
 
    flex-direction: column; 
 
} 
 

 
main { 
 
    padding: 16px; 
 
    padding-top: 100px; 
 
} 
 

 
p { 
 
    text-indent: 2em;

<header> 
 
    <span>Knox Enterprises Inc.</span> 
 
    <nav> 
 
    <i class="material-icons">menu</i> 
 
    <a href="index.html">Home</a> 
 
    <a href="About.html">About</a> 
 
    <a href="Contact.html">Contact</a> 
 
    </nav> 
 
</header> 
 
<main> 
 
    <h1>I'm trying to find out a way</h1> 
 
    <p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of 
 
    the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it. 
 
    </p> 
 
    <p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of 
 
    the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it. 
 
    </p> 
 
    <p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of 
 
    the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it. 
 
    </p> 
 
</main>