代码之家 › 专栏 › 技术社区 › Kim Stacks

为什么在全页面宽度时,品牌徽标不与内容左对齐?

materialize material-design css html javascript

0

Kim Stacks · 技术社区 · 8 年前

具体化css版本:v0.100.2

布局行为要求:

当屏幕宽度低于992px时隐藏的响应侧菜单
隐藏侧菜单时,菜单的图标显示在左上角
不管怎样,顶部导航栏都是固定的
当屏幕宽度>=992px,品牌标志类将以导航栏为中心
当屏幕宽度<992px,品牌徽标类别将左对齐

结果:我让它按照我的要求工作

问题:

当屏幕宽度<992px,品牌徽标类别将左对齐,但内容与屏幕宽度>=992px

注:

这是我第一次使用代码笔和堆栈片段。如果我没有正确使用它们,请纠正我。我遵循中的示例 https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ 和 https://meta.stackoverflow.com/a/343424/80353

在此处查看我的代码笔

Codepen

在此处查看我的stackoverflow片段

jQuery(function($) {
  $(".button-collapse").sideNav();
});

/**
 * Body CSS
 */

html,
body {
  height: 100%;
  background-color: #eee;
}

html,
body,
input,
textarea,
buttons {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}


/**
 * Layout CSS
 */

 header, main, footer {
   padding-left: 300px;
 }

 @media only screen and (max-width : 992px) {
   header, main, footer {
     padding-left: 0;
   }
 }


/**
 * helper Classes
 */
.no-margin {
  margin: 0px !important;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">




    <body>
      <header>
        <div class="navbar-fixed">
          <nav class="blue" role="navigation">
              <div class="nav-wrapper container">
                <a href="!#" data-activates="nav-mobile" class="button-collapse left no-margin"><i class="material-icons">menu</i></a>
                <a class="brand-logo">Logo</a>
                <ul class="right hide-on-med-and-down">
                    <li><a id="" href="#">Link</a></li>
                    <li><a id="" href="#">Link</a></li>
                    <li><a href="#" target="_blank">Link</a></li>
                    <li><a href="#" target="_blank">Link</a></li>
                </ul>
              </div>
          </nav>
        </div>
        <ul id="nav-mobile" class="side-nav fixed">
            <li><a id="" href="#">Link</a></li>
            <li><a id="" href="#">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
        </ul>
      </header>
      <main>
        <div class="container">
          <div class="section">
            <br>
            <h1>Brand.io</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin volutpat molestie. Nullam id tempor nulla. Aenean sit amet urna et elit pharetra consequat. Aliquam fringilla tortor vitae lectus tempor, tempor bibendum nunc elementum. Etiam ultrices tristique diam, vitae sodales metus bibendum id. Suspendisse blandit ligula eu fringilla pretium. Mauris dictum gravida tortor eu lacinia. Donec purus purus, ornare sit amet consectetur sed, dictum sit amet ex. Vivamus sit amet imperdiet tellus. Quisque ultrices risus a massa laoreet, vitae tempus sem congue. Maecenas nec eros ut lectus vehicula rutrum. Donec consequat tincidunt arcu non faucibus. Duis elementum, ante venenatis lacinia cursus, turpis massa congue magna, sed dapibus felis nibh sed tellus. Nam consectetur non nibh vitae sodales. Pellentesque malesuada dolor nec mi volutpat, eget vehicula eros ultrices.</p>
            <p>Aenean vehicula tortor a tellus porttitor, id elementum est tincidunt. Etiam varius odio tortor. Praesent vel pulvinar sapien. Praesent ac sodales sem. Phasellus id ultrices massa. Sed id erat sit amet magna accumsan vulputate eu at quam. Etiam feugiat semper imperdiet. Sed a sem vitae massa condimentum vestibulum. In vehicula, quam vel aliquet aliquam, enim elit placerat libero, at pretium nisi lorem in ex. Vestibulum lorem augue, semper a efficitur in, dictum vitae libero. Donec velit est, sollicitudin a volutpat quis, iaculis sit amet metus. Nulla at ante nec dolor euismod mattis cursus eu nisl.</p>
            <p>Quisque interdum facilisis consectetur. Nam eu purus purus. Curabitur in ligula quam. Nam euismod ligula eu tellus pellentesque laoreet. Aliquam erat volutpat. Curabitur eu bibendum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc efficitur lorem sit amet quam porta pharetra. Cras ultricies pellentesque eros sit amet semper.</p>
          </div>
        </div>
      </main>


      <footer class="page-footer blue">
        <div class="container">
          <div class="row">
            <div class="col l6 s12">
              <h5 class="white-text">Footer Content</h5>
              <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
            </div>
            <div class="col l4 offset-l2 s12">
              <h5 class="white-text">Links</h5>
              <ul>
                <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer-copyright">
          <div class="container">
          Made with â¥ by BusinessCoder
          <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
          </div>
        </div>
      </footer>

      

    </body>

请参见屏幕截图>=992px。请注意徽标如何不与内容齐平

请参见屏幕截图<992px。请注意,菜单图标与内容一起刷新

1 回复 | 直到 8 年前

1

Kim Stacks 8 年前

应该有其他方法来解决您的问题。你面临这个问题是因为你的导航 position: fixed 而且 width: 100% 另一方面,您添加了 padding-left: 300px 到nav的父元素(和其他元素),但当您有 fixed 元素,它不会调整到其父元素,只是移动 npx 到两侧。

请注意 :这不是唯一的解决方案。

CSS :

nav {
    color: #fff;
    background-color: #ee6e73;
    width: calc(100% - 300px);/* this will fix your issue */
    height: 56px;
    line-height: 56px;
}

更新您的 nav 或者在主css文件的最后一行添加上述代码。

更新:

这正是解决这个问题的方法

在下面

/**
 * Layout CSS
 */

 header, main, footer {
   padding-left: 300px;
 }

 /**
  * fix the left align for brand-logo
  */
 nav {
   width: calc(100% - 300px);
 }

 @media only screen and (max-width : 992px) {
   header, main, footer {
     padding-left: 0;
   }
   /**
    * allows the menu button to be left-aligned in < 992px screen
    */
   nav {
     width: 100%;
   }
 }