如何让导航栏在所有设备上保持相同的大小？

Question

我正在尝试让我的粘性导航栏跨越所有设备的页面宽度。它可以在计算机屏幕上运行，但是一旦 window 缩小到足够大，它就会搞砸。然而，无论屏幕的宽度如何，其上方的徽标都可以完美缩放。我尝试使用它的属性，但它似乎并没有改变导航栏上的输出。

我还尝试使用@media 将宽度强制为整个 window 的 70%。相反，它只影响计算机 window。我正在使用 max-width 并将其设置为 1200 像素。它实际上似乎没有做任何事情。我什至尝试添加 overflow:hidden 以防止在有任何内容超出范围时可能调整大小。

问题在于，一旦 window 足够小，它就会将导航栏中的文本更改为添加额外一行的位置。然后在居中停止工作并迫使自己离开屏幕后不久。

这里有一个 JSFiddle 可以搞乱：https://jsfiddle.net/Shadowfang/Lc5Ljaf4/

更新：L L 给我留下了一些我用来改变我的 JSFiddle 的代码。它解决了导航栏从屏幕上消失的问题。它还会完美调整大小，直到您无法再进一步缩小 window 为止。然而，我仍然需要做一些编辑来修复整体外观，并将菜单 return 恢复为水平。这是新的：https://jsfiddle.net/Shadowfang/Lc5Ljaf4/13/

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>The Den</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  <link rel="stylesheet" media="screen, projection" href="style.css">
  <script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type ="text/javascript" src="script.js"></script>
</head>

<body>
    <!-- It would be nice to know if tables are what's throwing off my entire website or not... but whatever. -->
    <div class="status"></div>
    <div class="logo"><!--I'll change the word "container" to Logo perhaps in the future here if I can get this example to work for once. Also let it be noted that I am in fact not using the "header" tag at any portion during this... which is bothersome. -->          
        <center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="100%" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center>
    </div>
    <div class ="navigation">

        <!-- The navigation portion... dear God... here is where it all usually goes wrong. -->
        <nav>
            <ul class="clearfix"> <!-- Clearfix?! Really?! I'm ASSUREDLY changing that one. -->
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
                <li><a href="#">Link 7</a></li>
                <li><a href="#">Link 8</a></li>
                <li><a href="#">Link 9</a></li>
            </ul>
        </nav><!-- End the hiddeously named section... and hopefully begin progress towards a complete page... -->
    </div>
    <div class ="logo2">
    </div>
    <div class ="content">
        <br/><br/>
        <center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!! TAKE NOTHING HERE YOU SEE SERIOUSLY FOR THE TIME BEING!!!</h2></center> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->
        <br/>
        <br/>
        <p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>

    </div>

CSS:

html {
    padding: 0;
    margin: 0;
    background-color: #000;
}

body {
    font-family: Helvetica, sans-serif;
    font-size: 93%;
    line-height: 1.5em;
    padding: 40px 0;
    margin: 0;
    color: #7d0000;
}

a,
a:link,
a:visited {
    color: blue;
}

h1, h2, h3, h4, h5, h6 {margin-top: 0;}

p {margin: 0 0 1em 0;}

.logo {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
}

.navigation {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.logo2 {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

h1 {
    background-color: #305782;
    color: #FFF;
    padding: 60px 25px;
    margin: 0;
}

nav {
    z-index: 500;
    background-color: #000;
}

.nav-placeholder {
    margin: 0 0 40px 0;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
}

.fixed .nav-inner {
    padding: 0 20px;
}

.fixed .nav-inner-most {
    max-width: 100%;
    margin: 0 auto;
    background-color: #000;
}

nav ul {
display: table;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}

nav ul li {
display: table-cell;
text-align: center;
}

nav ul li a:link,
nav ul li a:visited {
    display: block;
    text-decoration: none;
    padding: 10px 25px;
    background-color: #000;
    border: 2px solid #7d0000;
    color: #7d0000;
    font-size: 90%;
    font-weight: bold;
}

nav ul li a:hover {
    background-color: #28bfa1;
    color: #FFF
}

@media (min-width: 1200px) {
    .container{
        max-width: 70%;
   }
}

/* This seems to have an undesired effect, but may be necessary for later.
   The border-right: none; attribute is especially annoying...

nav ul li:last-child a:link,
nav ul li:last-child a:visited {
    border-right: none;
}

*/

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JS:

jQuery(document).ready(function() {

    // define variables
    var navOffset, scrollPos = 0;

    // add utility wrapper elements for positioning
    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery("nav").wrapInner('<div class="nav-inner"></div>');
    jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');

    // function to run on page load and window resize
    function stickyUtility() {

        // only update navOffset if it is not currently using fixed position
        if (!jQuery("nav").hasClass("fixed")) {
            navOffset = jQuery("nav").offset().top;
        }

        // apply matching height to nav wrapper div to avoid awkward content jumps
        jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    } // end stickyUtility function

    // run on page load
    stickyUtility();

    // run on window resize
    jQuery(window).resize(function() {
        stickyUtility();
    });

    // run on scroll event
    jQuery(window).scroll(function() {

        scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset) {
            jQuery("nav").addClass("fixed");
        } else {
            jQuery("nav").removeClass("fixed");
        }

    });

});

提前谢谢你，

影牙

Answer 1

正如您在 fiddle 的评论中提到的那样，表格确实是您网站或至少这部分代码的问题：

nav ul li {
display: table-cell;
text-align: center;
}

例如，您应该将显示更改为 inline-block。您将立即拥有更灵敏的行为，并且屏幕上不会掉落任何东西。它将需要一些额外的 css 更改以使其看起来不错，例如删除菜单的 li 元素内的 a 元素的填充。随着屏幕缩小，本来会离开屏幕的菜单项现在会跳到新的一行中。如果你想避免这种情况，你可以设置一个固定的宽度百分比。查看您的代码后，我认为这应该足以让您继续前进，如果这有帮助，请告诉我。

如何让导航栏在所有设备上保持相同的大小？

How do I get a navigation bar to stay the same size across all devices?

html

javascript

css

jquery

jsfiddle