Question

任何人都可以发现这个HTML /代码有什么问题吗？当我在浏览器上查看此页面时，导航栏显示为分为两部分，左侧菜单显示在导航栏后面：

HTML

  <ul>
    <li><a href="#" class="title">Loja</a></li>
  </ul>
  <ul class="right">
    <li><a href="#" class="user"/>username</li>
    <li><a href="#">logout</a></li>
  </ul>
</header>

<main>
  <aside>
    <ul>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
      <li><a href="#">blablabla</a></li>
    </ul>
  </aside>

  <article>
  </article>
</main>

CSS

header {
  position: sticky;
  top: 0;
  background-color: #333;
}

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    float: left;
}

header ul.right {
  float: right;
}

header li {
  float: left;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

jsfiddle：https://jsfiddle.net/klebermo/ch6gtj3p/3/

Answer 1

您也可以将位置设置为绝对值。

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Special+Elite
                |Luckiest+Guy|Slabo+27px|Open+Sans);

header {
  position: absolute;
  top: 0;
  background-color: #333;
  width:100%;
}

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    float: left;
}

header ul.right {
  float: right;
}

header li {
  float: left;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

aside ul {
    list-style-type: none;
    margin: 80px 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

aside li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    font-family: 'Special Elite', cursive;
}

/* Change the link color on hover */
aside li a:hover {
    background-color: #555;
    color: white;
}

aside li.active {
    background-color: #4CAF50;
}

.title {
  font-family: 'Luckiest Guy', cursive;
}

.user {
  font-family: 'Slabo 27px', serif;
}

div.main {
  font-family: 'Open Sans', sans-serif;
}

button {
	overflow: visible;
	width: auto;
}

button.link {
	font-family: "Verdana" sans-serif;
	font-size: 1em;
	text-align: left;
	color: blue;
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
  -moz-user-select: text;
}

button.link span {
	text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
	color: black;
}

＆＃13;

<body>
    <header>
      <ul>
        <li><a href="#" class="title">Loja</a></li>
      </ul>
      <ul class="right">
        <li><a href="#" class="user"/>username</li>
        <li><a href="#">logout</a></li>
      </ul>
    </header>

    <main>
      <aside>
        <ul>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
        </ul>
      </aside>

      <article>
      </article>
    </main>
  </body>

＆＃13;

Answer 2

position:sticky无效css。我认为你要做的是position:fixed。将此标题与width:100%;一起应用于标题，它应该可以解决问题

header {
  position: fixed;
  width:100%;
  top: 0;
  background-color: #333;
}

导航栏显示分为两部分

2 个答案: