Question

我目前正在从头开始编写一个网站，我的css和html存在一些问题。我不确定如何在导航栏和我的内容框之间创建空格。这是我的HTML：

http://pastebin.com/cTVCx0gm

和我的css：

http://pastebin.com/w61aTmHv

由于我是一名新手程序员，我不确定我做错了什么......

谢谢！

Answer 1

试试这个

Demo

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
li {
    display: inline;
    float: left;
}
a {
    display: block;
    width: 150px;
    height: 30px;
    background-color: #024c68;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    display: inline;
}
a:link {
    color: #ffffff;
    text-decoration: none;
    font-family: verdana;
}    /* unvisited link */
a:visited {
    color: #ffffff;
    text-decoration: none;
    font-family: verdana;
} /* visited link */
a:hover {
    color: #ffffff;
    text-decoration: none;
    font-family: verdana;
    background: #226078;
}   /* mouse over link */
a:active {
    text-decoration: underline;
    text-decoration: none;
    font-family: verdana;
}  /* selected link */
/*this is the body css*/
body {
    background-color: #62b1d0;
}
div.box {
    background-color: #99CCFF;
    border: 5px solid #99CCFF;
    clear: left;
    margin: 9px 0 0 0;
    padding: 8px 10px;
    width: 900px;
}
.clrboth {
    clear: both;
}

Answer 2

您需要做的就是将“li”类更改为：

li
{
display:inline-block;
}

我在这里创造了这个小提琴，所以你可以看到输出。您可以左右移动中心栏以查看行为。

http://jsfiddle.net/ninja1/ALKPP/

导航栏下方的网站段框

2 个答案: