样式化导航栏

Question

我想在Introduce Yourself和主导航栏之间创建一个空间，就像Share Stories和自我介绍之间的空间。自我介绍导航栏和Share Stories导航栏的样式代码是相同的，所以我有点困惑为什么它这样显示。

这是css代码：

div.IntroduceYourself nav,
div.IntroduceYourself nav ul,
div.IntroduceYourself nav li,
div.IntroduceYourself nav a {
    list-style: none;
    margin: 8px 8px 8px 8px;
    padding: 2px 2px 2px 2px;
    border: 2px 2px 2px 2px;
    font-size: 12px;
    font-family: Helvetica;
    line-height: 1;
}

div.IntroduceYourself nav ul {

    zoom: 1;
    background: #a7bc7a url(images/pattern.png) top left repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #839b4e;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    width: 578px;
    margin: 0 auto;
    padding: 0;
}

div.IntroduceYourself nav ul:before {
    content: '';
    display: block;
}

div.IntroduceYourself nav ul:after {
    content: '';
    display: table;
    clear: both;
}

div.IntroduceYourself nav a,
div.IntroduceYourself nav a:link,
div.IntroduceYourself nav a:visited {
    padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 -1px 1px #586835;
    border-right: 1px solid #839b4e;
}

div.IntroduceYourself nav a:hover {
    color: #586835;
    text-shadow: 0 1px 1px #bdcd9c;
}

div.IntroduceYourself nav li {
    float: left;
    border-right: 1px solid #b2c58b;
}

div.IntroduceYourself nav ul li.category{
    float: left;
    vertical-align: top;
}

div.IntroduceYourself nav ul li {
    float: right;
    vertical-align: top;
}




div.Stories nav,
div.Stories nav ul,
div.Stories nav li,
div.Stories nav a {
    list-style: none;
    margin: 4px 4px 4px 4px;
    padding: 2px 2px 2px 2px;
    border: 2px 2px 2px 2px;
    font-size: 12px;
    font-family: Helvetica;
    line-height: 1;

}

div.Stories nav ul {
    zoom: 1;
    background: #a7bc7a url(images/pattern.png) top left repeat;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #839b4e;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    width: 578px;
    margin: 0 auto;
    padding: 0;
}

div.Stories nav ul:before {
    content: '';
    display: block;
}

div.Stories nav ul:after {
    content: '';
    display: table;
    clear: both;
}

div.Stories nav a,
div.Stories nav a:link,
div.Stories nav a:visited {
    padding: 5px 12px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 -1px 1px #586835;
    border-right: 1px solid #839b4e;
}

div.Stories nav a:hover {
    color: #586835;
    text-shadow: 0 1px 1px #bdcd9c;
}

div.Stories nav li {
    float: left;
    border-right: 1px solid #b2c58b;
}

div.Stories nav ul li.category{
    float: left;
    vertical-align: top;
}

div.Stories nav ul li {
    float: right;
    vertical-align: top;
}

由于

Answer 1

删除这两行：

.mainHead nav {
    display: table-cell;
    float: left;
}

（就个人而言，我会对整个事情进行重组，因为它有点混乱。）