0

我有以下 HTML 代码

<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。

4

3 回答 3

1

您可以覆盖实际的 css。

尝试使用这个：

.ui-tabs{
  width:400px;
}

你必须在你的页面中应用这个类。

小提琴

希望这可以帮助

于 2013-08-21T16:51:07.867 回答
0

尝试这个：

类来设置所有选项卡的样式

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

仅用于设置活动选项卡样式的类

.ui-tabs .ui-tabs-nav li.ui-tabs-active a{width:50px}
于 2013-08-21T16:55:24.930 回答
-1 
#tabs
{
width:400px !important;

}
于 2013-08-21T16:52:24.337 回答