Question

我可以在没有花车的直接htm文件中使标签工作正常。当我添加一个左＆amp;正确的容器并排，标签搞砸了。内容显示在其下方的tab div之外。 enter image description here

这是代码，有人解决这个问题吗？我发现了类似的东西，但没有完全像我正在完成的事情。 jquery 1.6.4

<link href="css/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>


    <script type="text/javascript">
    $(function ($)
    {
        $('#tabs').tabs();
    });
</script>

    <br />

    <a href="cheer.htm" style="margin-left:10px;">
        <img border="0" src="images/cheerleadingjrchiefs3sm.gif" width="180" height="92" alt="" />
    </a>

</div>
<div id="rightContainer">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
        </div>
    </div>
</div>

样式：

    #navMenu
{
    list-style-type:none;
    font-size:1.2em;
    font-weight:bold;
    margin-left: 10px;
    height: 297px;
}

#navMenu li
{
    padding-bottom:5px;
}

#leftContainer
{
    width:210px;
    float:left;
    background-image: url("../images/jrchiefsbg.gif");
    background-repeat:repeat;
}


#rightContainer
{
    margin-left:220px;
}

包含的jquery样式表中的两个样式中的两个

.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.ui-helper-clearfix {
    display: block;
}

我用萤火虫去除了清除：两者;在类.ui-helper-clearfix：之后它把所有东西放在它假设的地方减去实际的背景灰色 enter image description here

现在唯一的问题是灰色背景不在整个li元素的后面

Answer 1

基本上，尝试一下＆＃34; float：right＆＃34;在你的右边。

如果这不起作用，请考虑制作一个小提琴，当您可以立即调试代码时，更容易理解这些内容。

Answer 2

因此，在使用firebug页面上的CSS后，我无法理解它。我切换到了 http://flowplayer.org/tools/tabs/index.html

使用非图像CSS真的很棒。要使用图像选项卡，我必须重新设置实际的选项卡图像，以便在正确的容器中获得所需的内容。

浮动div内的jquery选项卡未正确显示

2 个答案: