css - 如何更改我的选项卡使下面的内容缩进？

Question

我的标签 HTML 是:

<ul id = "tabs">
    <li id = "home" onclick = "document.location.href = \'/\'">Home</a></li>
    <li id = "games" onclick = "document.location.href = \'/games/\'">Games</li>
    <li id = "tutorials" onclick = "document.location.href = \'/tutorials/\'">Tutorials</li>
    <li id = "snippets" onclick = "document.location.href = \'/snippets/\'">Snippets</li>
    <li id = "people" onclick = "document.location.href = \'/people.php\'">People</li>
    </ul>

它们的 CSS 是:

#tabs {
     margin: 0;
     padding: 0;
 }
 #tabs li { 
     display:inline; 
     float:left;
     position:relative;
     left:0px;
     top:-30px;
     padding: 9px;
     padding-top: 2px;
     padding-bottom: 2px;
     margin-left: 5px;
     border-top: 2px solid #03c;
     border-left: 2px solid #03c;
     border-right: 2px solid #03c;
     border-top-right-radius: 3px;
     -moz-border-top-right-radius: 3px;
     border-top-left-radius: 3px;
     -moz-border-top-left-radius: 3px;
     background-color: #dddddd;
     height: 24px;
     font-family: trebuchet ms;
     font-size: 20px;
     font-weight: bold;
 }

出于某种原因，在我的页面上，选项卡占据了下方内容的空间。明白我的意思here . 是的，我知道有些链接无处可去。它仍在设置中。

Answer 1

<li> #tabs 中的元素列表的位置为 top: -30px .然而，#tabs正在按照 .content 显示.这似乎可以解决您的问题:

#tabs {
     margin: 0;
     padding: 0;
     margin-bottom: -35px;
     display: inline-block;
 }