css - 底部页脚代码

Question

我在使页脚工作时遇到了一个小问题，因为 div 并没有去我想让它们去的地方。

想象一下，图片在页面底部，在页脚处，你如何获得那里的链接？它将分布在页面的整个底部，我想知道你们是否可以帮助我，因为我正在制作的这个网站必须看起来很棒。

这是代码：

@charset "utf-8";
/* CSS Document */

#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
width: 600px;
list-style: none;
margin: 0 auto;

}
#nav li {
float: left;
}
#nav li a {
padding: 8px 15px;
text-decoration: none;
color:white;
display:inline-block;
font-size:18px;
}
#nav li a:hover {
color:black;
}
body {
margin: 0;
padding: 0;
}

a {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color:#C7C7C7;
text-decoration:none;
}

a:hover {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color:#009ACD;
text-decoration:none;
}

h1 {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
border-style:solid;
border-color:black;
color:white;
width:900px;
left:50%;
right:50%;
margin-top: 0;
font-size:36px;
}

#header {
margin-top: 0;
width:100%;
height:150px;
background-color:#09F;
}

font {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

小提琴

Answer 1

#footer .nav li:nth-child(even) {
    top: 70px; /* eg. */
}

或者

#footer .nav li:nth-child(2n+0) {
    top: 70px; /* eg. */
}

别忘了放

#footer .nav li {
    position: relative;
}

更新

添加了一些代码来证明 li 元素的合理性。请参阅 jsfiddle 链接。然后您可以根据需要设置导航样式。关联

全屏查看全屏