修复后导航看起来不对

Question

我希望我的导航位置固定。但是当我在导航中将位置更改为 "fixed" 时，它看起来很奇怪。这里有两个例子：没有固定位置：https://jsfiddle.net/Timowo/3nrvch3c/

<nav>
  <ul>
    <li class="category"><a href="#">Contact</a></li>
    <li class="category"><a href="#">Work</a></li>
    <li class="category active"><a href="#">Home</a></li>
    <li class="logotext">Logo</li>
  </ul>
</nav>

固定位置：https://jsfiddle.net/Timowo/5aock5k1/

    <nav style="position: fixed;">
  <ul>
    <li class="category"><a href="#">Contact</a></li>
    <li class="category"><a href="#">Work</a></li>
    <li class="category active"><a href="#">Home</a></li>
    <li class="logotext">Logo</li>
  </ul>
</nav>

我必须更改什么才能使它既是内联的又是固定的？

谢谢！

Answer 1

使用 position:fixed 元素将折叠到最宽后代的宽度..在没有定义宽度的情况下。

只需设置width:100%

* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  background-color: red;
}
nav {
  transition: all 0.2s ease-in-out;
  position: fixed;
  width: 100%;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}
nav ul li.logo {
  padding: 14px;
  float: left;
}
nav ul li.logotext {
  font-family: Futura;
  color: white;
  font-size: 1.3em;
  padding: 28px;
  text-shadow: 3px 3px black;
}
nav ul li.category a {
  display: block;
  color: white;
  text-align: center;
  padding: 30px 20px;
  text-decoration: none;
  font-size: 1.2em;
  float: right;
  font-family: Futura;
  text-shadow: 3px 3px black;
}
nav ul li.category:hover a {
  background-color: #212121;
}
nav ul li.active a {
  background-color: #212121;
}

<nav>
  <ul>
    <li class="category"><a href="#">Contact</a>
    </li>
    <li class="category"><a href="#">Work</a>
    </li>
    <li class="category active"><a href="#">Home</a>
    </li>
    <li class="logotext">Logo</li>
  </ul>
</nav>

修复后导航看起来不对

Navigation looks wrong when it's fixed

html

css

navigation

fixed