0

次のような画像スライダーがあります。

<div class="bx-wrapper" style="width:516px; position:relative;">
    <div class="bx-window" style="position:relative; overflow:hidden; width:516px;">
        <ul style="width: 999999px; position: relative; left: -516px;">
            <li style="width: 129px; float: left; list-style: none outside none; height:68px; margin-top:3px">
                <a href="javascript:void(0)" id="p_5">
                    <img src="question_pliki/5.png" alt="">
                </a>
            </li>
            <!--... many more <li> elements-->
        </ul>
    </div>
</div>

私がしたいのは、アクティブな画像に境界線を作成することです。次の JQuery スクリプトがあります。 

$('.bx-window ul li').click(function(){
    $(this).parent().find('li').css('border','none');
    $(this).css('border','5px solid #f28458');
});

境界線を作成しますが、画像の外側になり、レイアウトが台無しになります。

画像の中に枠線を入れることはできますか?

4

1 に答える 1

0

box-sizing要素の を に変更できますborder-box。これにより、境界線を内側にすることができます。

.bx-window ul li {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
于 2012-09-06T00:25:14.713 に答える