标签内容无法正确呈现

Question

我正在使用easytabs jquery插件（http://os.alfajango.com/easytabs/）。我写了一个小代码

<div id="tab-container" class="tab-container">
  <ul class='etabs' style="  float:left;white-space: nowrap;padding-left:0px">
    <li class='tab' style="display:inline-block;background-color:#ff0000"><a href="#article-section">Articles</a></li>
    <li class='tab' style="display:inline-block"><a href="#topic-section" style="">Topics</a></li>
    <li class='tab' style="display:inline-block"><a href="#discuss-section">Discussions</a></li>
    <li class='tab' style="display:inline-block"><a href="#question-section">Questions</a></li>
  </ul>
  <div id="article-section">
    <h2>HTML Markup for these tabs</h2>
    <!-- content -->
  </div>
  <div id="topic-section" >
    <h2>JS for these tabs</h2>
    <!-- content -->
  </div>
  <div id="discuss-section">
    <h2>CSS Styles for these tabs</h2>
    <!-- content -->
  </div>
  <div id="question-section">
  <h2> question Section</h2>
  </div>
</div>

javascript代码

 jQuery(document).ready(function(){
          jQuery('#tab-container').easytabs();});

我使用的是

li { 

 background-color: #FF0000;
height:40px;
padding-left:2%;
padding-right:2%;
}


ul a{ width:100%;
    text-decoration: none;
    color:#FFFFFF;
    font-size:150%;
    line-height: 40px; 

}

列表项目正在以标签格式正确呈现，但内容与列表项目重叠，请指导如何制作其下面的列表项目标签。这是屏幕截图。

Answer 1

尝试为tab-container内的所有div添加样式，如下所示：

.tab-container div {
   float:left;
   clear:both;
   width:100%;
}

或尝试使用EasyTab网站的css示例：

.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }

我希望这有帮助！