尝试的CSS jQuery用户界面的选项卡

我有以下的HTML代码尝试的CSS jQuery用户界面的选项卡

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Tabs - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/css/tshirt.css" /> 
    <script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Shirt Builder</a></li> 
    <li><a href="#tabs-2">Add QR Message</a></li> 
    <li><a href="#tabs-3">View Product</a></li> 
    <li><a href="#tabs-4">Checkout</a></li> 

    </ul> 
    <div id="tabs-1"> 
    <img src="img/tabs.png" width="300" height="200" align="left"> 
    <p>P1.</p> 
    </div> 
    <div id="tabs-2"> 
    <p>P2.</p> 
    </div> 
    <div id="tabs-3"> 

    <p>P3.</p> 
    </div> 

    <div id="tabs-4"> 

    <p>Page 4.</p> 
    </div> 
</div> 



</body> 
</html>

当我检查元素

div#tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all 1106px x 282px

所以，在我的CSS样式表，我有

#tabs 
{ 
width:400px; 

}

但我不能改变ui-tabs的宽度，它仍然保持在1106px。

来源

2013-08-21 lilzz

你能创建一个jsfiddle吗？ – MCSI

你可以覆盖实际的CSS。

尝试使用这样的：

.ui-tabs{ 
    width:400px; 
}

你在你的网页应用此类。

Fiddle

希望这可以帮助

来源

2013-08-21 16:51:07

-1

#tabs 
{ 
width:400px !important; 

}

来源

2013-08-21 16:52:24

-1：'！important'不应该是你需要在CSS中重写任何东西的前提解决方案。 –

这是为了应用我们的CSS而不使用js我根据用户问题给出这个答案总是不喜欢不是一个解决方案，你可以给建议...任何方式感谢兄弟 –

试试这个：

类样式的所有标签

.ui-tabs .ui-tabs-nav li{width:50px}

类仅适用于风格的活动标签

.ui-tabs .ui-tabs-nav li.ui-tabs-active a{width:50px}

来源

2013-08-21 16:55:24 user2232273

尝试的CSS jQuery用户界面的选项卡

回答

相关问题