0

jQueryタブを使用して画像を表示しています。

jfiddleでも表示できる HTML は次のとおりです。

<div id="dgTabs" style="width: 500px;">
    <ul>
        <li><a id="a1" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a2" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
              <li><a id="a3" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a4" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
            <li><a id="a5" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a6" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
              <li><a id="a7" href="tab-1"> 
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /></a></li>
        <li><a id="a8" href="tab-2">
            <img src="http://images.smh.com.au/2012/10/30/3754903/umbrella_tn-90x60.jpg" /> </a></li>
    </ul>
</div>

</p>

画像がタブ全体に表示されるように CSS を変更するにはどうすればよいですか? どの CSS ファイルのどの要素を更新する必要がありますか? 基本的に、パディングは必要ありません。

パディングされた画像

4

1 に答える 1

1

このパディングはjquery-ui.cssファイルに存在します。以下のパディングをオーバーライドする必要があります

#tabs .ui-tabs .ui-tabs-nav li a {
  float: left;
  padding: .5em 1em;
  text-decoration: none;

 }

更新しました

幅を設定するには、次のようにする必要があります

#tabs ul li, #tabs ul li a {
  width: 15px;
 }
于 2012-10-31T05:05:09.037 に答える