运行 grunt dist 后标题未正确对齐答案

【问题标题】：Header doesn't align correctly after running grunt dist运行 grunt dist 后标题未正确对齐
【发布时间】：2014-05-11 22:54:50
【问题描述】：

我正在使用Yeoman webapp generator 创建一个网站。我有一个奇怪的问题。当我只是做 grunt 服务时，标题项正确地左右对齐，但是当我运行 grunt dist 并打开生成的文件时，标题项都向左对齐。

我的html：

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="shortcut icon" href="/favicon.ico">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->
    </head>
    <body>
        <header>
            <a class="logo" href="index.html"><h1>Title</h1></a>
            <nav>
                <ul>
                    <li><a href="blog/">Blog</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <!-- build:js scripts/vendor.js -->
        <!-- bower:js -->
        <script src="bower_components/jquery/dist/jquery.js"></script>
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js({app,.tmp}) scripts/main.js -->
        <script src="scripts/main.js"></script>
        <!-- endbuild -->
</body>
</html>

我的头文件的 scss 文件（我正在使用 jeet.gs 和 breakpoint-sass：

header {
  @include center(960px);

  text-align: justify;

  .logo {
    font-size: 1em;
    font-weight: 700;
  }

  nav {
    ul {
      list-style: none;

      li {
        display: inline-block;

        a {
          display: block;
        }
      }
    }
  }

  a {
    padding: .5em 1em;

    text-decoration: none;

    color: #fff;

    transition: text-decoration .3s ease;

    &:hover {
      text-decoration: underline;
    }
  }

  .logo,
  nav {
    display: inline-block;
  }

  &::before,
  &::after {
    content: '';
    display: inline-block;
    width: 100%;
  }
}

这是使用 grunt serve 时生成的 css 文件：

/* line 5, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

html {
  line-height: 1;
}

/* line 24, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

ol,
ul {
  list-style: none;
}

/* line 26, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

q,
blockquote {
  quotes: none;
}

/* line 103, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

a img {
  border: none;
}

/* line 116, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.0.alpha.19/stylesheets/compass/reset/_utilities.scss */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/

/* line 196, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

header,
main .content,
main .content article,
main .content .photo {
  *zoom: 1;
}

/* line 188, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

header:before,
main .content:before,
main .content article:before,
main .content .photo:before,
header:after,
main .content:after,
main .content article:after,
main .content .photo:after {
  content: '';
  display: table;
}

/* line 192, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

header:after,
main .content:after,
main .content article:after,
main .content .photo:after {
  clear: both;
}

/* line 3, ../../app/styles/_base.scss */

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

/* line 9, ../../app/styles/_base.scss */

html,
body {
  height: 100%;
}

/* line 14, ../../app/styles/_base.scss */

body {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.15;
  letter-spacing: .2px;
  background-color: #f77937;
}

/* line 1, ../../app/styles/_header.scss */

header {
  width: auto;
  max-width: 960px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  text-align: justify;
}

/* line 6, ../../app/styles/_header.scss */

header .logo {
  font-size: 1em;
  font-weight: 700;
}

/* line 12, ../../app/styles/_header.scss */

header nav ul {
  list-style: none;
}

/* line 15, ../../app/styles/_header.scss */

header nav ul li {
  display: inline-block;
}

/* line 18, ../../app/styles/_header.scss */

header nav ul li a {
  display: block;
}

/* line 25, ../../app/styles/_header.scss */

header a {
  padding: .5em 1em;
  text-decoration: none;
  color: #fff;
  transition: text-decoration .3s ease;
}

/* line 34, ../../app/styles/_header.scss */

header a:hover {
  text-decoration: underline;
}

/* line 39, ../../app/styles/_header.scss */

header .logo,
header nav {
  display: inline-block;
}

/* line 44, ../../app/styles/_header.scss */

header::before,
header::after {
  content: '';
  display: inline-block;
  width: 100%;
}

/* line 1, ../../app/styles/_content.scss */

main {
  background-color: #fff;
  color: #333;
}

/* line 5, ../../app/styles/_content.scss */

main .content {
  width: auto;
  max-width: 960px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  *zoom: 1;
}

/* line 188, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

main .content:before,
main .content:after {
  content: '';
  display: table;
}

/* line 192, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

main .content:after {
  clear: both;
}

/* line 9, ../../app/styles/_content.scss */

main .content article {
  float: left;
  display: inline;
  clear: none;
  text-align: inherit;
  padding-left: 0;
  padding-right: 0;
  width: 65.66667%;
  margin-left: 0%;
  margin-right: 3%;
  padding: 1em;
}

/* line 41, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

main .content article:last-child {
  margin-right: 0%;
}

/* line 14, ../../app/styles/_content.scss */

main .content article h2 {
  font-size: 1.8em;
}

/* line 18, ../../app/styles/_content.scss */

main .content article p {
  margin-top: .4em;
}

@media (max-width: 600px) {
  /* line 9, ../../app/styles/_content.scss */

  main .content article {
    display: block;
    clear: both;
    float: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* line 127, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

  main .content article:first-child {
    margin-left: auto;
  }

  /* line 130, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

  main .content article:last-child {
    margin-right: auto;
  }
}

/* line 27, ../../app/styles/_content.scss */

main .content .photo {
  float: left;
  display: inline;
  clear: none;
  text-align: inherit;
  padding-left: 0;
  padding-right: 0;
  width: 31.33333%;
  margin-left: 0%;
  margin-right: 3%;
  padding: 1em;
}

/* line 41, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

main .content .photo:last-child {
  margin-right: 0%;
}

@media (max-width: 600px) {
  /* line 27, ../../app/styles/_content.scss */

  main .content .photo {
    display: block;
    clear: both;
    float: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* line 127, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

  main .content .photo:first-child {
    margin-left: auto;
  }

  /* line 130, ../../app/bower_components/jeet.gs/scss/jeet/_grid.scss */

  main .content .photo:last-child {
    margin-right: auto;
  }
}

这是使用 grunt dist 时生成的 css（未缩小）：

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
html {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, td, th {
    text-align: left;
    font-weight: 400;
    vertical-align: middle;
}
blockquote, q {
    quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
    content: "";
    content: none;
}
a img {
    border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
header, main .content, main .content .photo, main .content article {
    *zoom: 1;
}
header:after, header:before, main .content .photo:after, main .content .photo:before, main .content article:after, main .content article:before, main .content:after, main .content:before {
    content: '';
    display: table;
}
header:after, main .content .photo:after, main .content article:after, main .content:after {
    clear: both;
}
*, ::after, ::before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    height: 100%}
body {
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
    line-height: 1.15;
    letter-spacing: .2px;
    background-color: #f77937;
}
header {
    width: auto;
    max-width: 960px;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    text-align: justify;
}
header .logo {
    font-size: 1em;
    font-weight: 700;
}
header nav ul {
    list-style: none;
}
header nav ul li {
    display: inline-block;
}
header nav ul li a {
    display: block;
}
header a {
    padding: .5em 1em;
    text-decoration: none;
    color: #fff;
    transition: text-decoration .3s ease;
}
header a:hover {
    text-decoration: underline;
}
header .logo, header nav {
    display: inline-block;
}
header::after, header::before {
    content: '';
    display: inline-block;
    width: 100%}
main {
    background-color: #fff;
    color: #333;
}
main .content {
    width: auto;
    max-width: 960px;
    float: none;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
    *zoom: 1;
}
main .content:after, main .content:before {
    content: '';
    display: table;
}
main .content:after {
    clear: both;
}
main .content article {
    float: left;
    display: inline;
    clear: none;
    text-align: inherit;
    width: 65.66667%;
    margin-left: 0;
    margin-right: 3%;
    padding: 1em;
}
main .content article:last-child {
    margin-right: 0;
}
main .content article h2 {
    font-size: 1.8em;
}
main .content article p {
    margin-top: .4em;
}
@media (max-width:600px) {
    main .content article {
    display: block;
    clear: both;
    float: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
main .content article:first-child {
    margin-left: auto;
}
main .content article:last-child {
    margin-right: auto;
}
}main .content .photo {
    float: left;
    display: inline;
    clear: none;
    text-align: inherit;
    width: 31.33333%;
    margin-left: 0;
    margin-right: 3%;
    padding: 1em;
}
main .content .photo:last-child {
    margin-right: 0;
}
@media (max-width:600px) {
    main .content .photo {
    display: block;
    clear: both;
    float: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
main .content .photo:first-child {
    margin-left: auto;
}
main .content .photo:last-child {
    margin-right: auto;
}
}

正确（使用 grunt serve）：

不正确（使用 grunt dist）：

所以我不太确定问题出在哪里......如果有人可以帮助我，那就太棒了！

【问题讨论】：

需要所有此代码来重现问题吗？
有点多见谅，但不知道问题出在哪里。所以我不想忘记任何事情。
这是调试过程的一部分：尽可能减少代码以重现问题。十分之九，你自己解决问题。

标签： html css sass gruntjs

【解决方案1】：

您没有在标题中浮动导航。使用这个：

header nav{
 float:right;
}

【讨论】：

【解决方案2】：

我认为这是floats 的问题。

尝试将您的第一个列表项浮动到左侧，将其他列表项浮动到右侧：

header nav ul {
    float: left;
}
header nav ul li {
    float: left;
}
header nav ul li:not(:first-child) {
    float: right;
}

【讨论】：