我的导航消失在 1038px 宽度 window

Question

大家好，我的导航栏在一定宽度后会进入导航栏下方，我怎样才能让它一直停留在那里？ fiddle 上的代码 https://jsfiddle.net/mohamedkna/0cm7zquh/

只需减小js右下角的宽度fiddle，你会发现<ul> goes under the main navigation bar disappears (It goes under the nav)

我的解决方案是右浮动，但我不能右浮动，所以有任何替代方案

HTML :

  <html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>Turbo</title>`

  </head>
  <body class="body">
        <nav class="nav">
            <div class="nav-container">
                <a href="#" class="logo"><img src="includes/img/main_logo.png"></a>

                <a href="#" class="sign-in" id="color">Sign In</a>

                <ul class="navigation">
                    <li><a href="">Get Started</a></li>
                    <li><a href="">Products & Pricing</a></li>
                    <li><a href="">Help</a></li>
                    <li><a href="">Tools & Tips</a></li>
                    <li><a href="">After You File</a></li>
                </ul>
            </div>
        </nav>
  </body>
</html>

CSS :

*, ::after, ::before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box; }

body {
  color: #000305;
  font-size: 87.5%;
  font-family: Arial;
  text-align: left; }

a {
  text-decoration: none; }

a:link, a:visited {
  color: #0082c3; }

a:hover, a:active {
  text-decoration: underline;
  color: #004f76; }

.nav {
  width: 100%;
  background-color: #0082C3;
  height: 75px; }

.nav-container {
  width: 84.7%;
  margin: 0 auto;
  height: 40px;
  clear: both; }

.nav img {
  height: 40px;
  margin-top: 18px;
  vertical-align: middle; }

.navigation {
  float: right;
  list-style: none;
  margin: 0px; }

.navigation li {
  display: inline;
  float: left; }

.navigation li a {
  display: inline-block;
  line-height: 60px;
  color: #fff;
  padding: 16px 15px 0 15px;
  font-weight: 200;
  font-size: 118%; }

.sign-in {
  color: #fff;
  float: right;
  padding: 6px 12px;
  margin: 26px 14px;
  width: 75px;
  font-size: 110%;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.75);
  line-height: 25px;
  font-weight: 200;
  background-color: #FF8000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px; }

#color {
  color: #fff; }

/*# sourceMappingURL=style.css.map */

Answer 1

您的 link 栏没有消失，它被推到其他图片下方。

如果将 .nav 高度设置为 160px，您将看到菜单。

这无助于解决您的问题，但您至少可以看到它的去向。

Answer 2

@media screen and (max-width: 992px) {
    .nav-container {
        width: 95%;
    }
}

这行得通，我们可以根据需要更改最大宽度

我的导航消失在 1038px 宽度 window

My navigation disappearing in 1038px width window

html

css

responsive-design