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

您可以放置在header文字和导航栏中，但是为了使用css轻松操纵文字的位置，它应放在div {{1}内}或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;

Answer 2

＆＃13;

header>div {
	 display:inline;
	 float:left
        /*insert something here?*/
    }

    nav {
	display:inline;
	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;
      }
    }

＆＃13;

<header>
        <div>Knox Enterprises Inc.</div>
		
        <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>

＆＃13;

Answer 3

我会header display: flex并使用justify-content: space-between将它们分开 - 或者您可以删除文本和导航并排在左侧，或{ {1}}将它们放在中心或justify-content: center将它们放在右侧。如果文本更合适，请将文字放在justify-content: flex-end或其他元素中，然后添加h1以将其固定在页面顶部。

＆＃13;

position: fixed; width: 100%

＆＃13;

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

＆＃13;

导航栏和标题组合

3 个答案: