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タブの幅を変更することはできません.1106pxのままです。

4

3 に答える 3

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 に答える