运行grunt dist后，标题没有正确对齐

时间：2014-05-11 22:54:51

标签： html css sass gruntjs

我正在使用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（unminified）时生成的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;
}
}

正确（使用咕噜声）： Correct

不正确（使用grunt dist）： Incorrect

所以我不确定问题是什么......如果有人能帮助我那会很棒！

2 个答案:

答案 0 :(得分：0)

您的标题中没有浮动导航。使用此：

header nav{
 float:right;
}

答案 1 :(得分：0)

我认为这是floats的问题。

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

header nav ul {
    float: left;
}
header nav ul li {
    float: left;
}
header nav ul li:not(:first-child) {
    float: right;
}
相关问题
最新问题