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

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;
 }

由于某种原因，在我的页面上，选项卡占用了下面的空间。看看我的意思这里。 是的，我知道有些链接无处可去。目前仍在设置中。

Answer 1

#tabs 列表中的

元素的位置为 top: -30px。但是，#tabs 的显示与 .content 一致。这似乎可以解决您的问题：

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