0

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

http://pastebin.com/cTVCx0gm

和我的CSS：

http://pastebin.com/w61aTmHv

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

谢谢！

4

2 回答 2

0

尝试这个

演示

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;
}
于 2013-07-27T11:48:37.297 回答
0

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

li
{
display:inline-block;
}

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

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

于 2013-07-27T11:57:21.237 回答