使用Jquery和CSS的选项卡

Question

我从这里复制了代码。http://jsfiddle.net/syahrasi/Us8uc/。

<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
        <li><a href="#tab-4">Tab 4</a></li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">

        </div>
        <div id="tab-2" class="tab-content">


        </div>
        <div id="tab-3" class="tab-content">

        </div>
        <div id="tab-4" class="tab-content">

        </div>
    </div>
</div>

由于某种原因，我似乎找不到，它是这样显示的。http://postimg.org/image/ejs26rx3t/

我尽了最大的努力，但还是不能让它看起来像小提琴上显示的那样。请帮帮忙。

Answer 1

在使用web开发工具时，您会注意到normalize.css，例如，检查ul元素-- list-style: outside none none;设置在normalize.css的第21行。你可以用谷歌搜索normalize.css来下载并包含在你的页面中。

小提琴中使用的normalize.css是这样的：http://jsfiddle.net/css/normalize.css

Answer 2

这对我很有效

<ul class="tabs-menu" style="width:100%; margin-bottom:0px;">