1

有点 css 新手，所以这里是：我正在尝试获得正确的 css，但是当我单击不同的 div 并添加边框时，它会在其他 divs+输入周围移动。例如看：

http://jsfiddle.net/LFvWe/

html

<div id="icons_761" class="icons">
            <div>
                <input id="imgcolor_761_Black_Solid" src="/Images/icon/Black_Solid.jpg" class="emptyicon swatch" type="image" value="Black_Solid"></div>
            <div>
                <input id="imgcolor_761_Coral_Solid" src="/Images/icon/Coral_Solid.jpg" class="emptyicon swatch" type="image" value="Coral_Solid"></div>
            <div>
                <input id="imgcolor_761_Emerald_Solid" text="Emerald Solid" class="emptyicon swatch" type="button" value="Emerald Solid"></div>
            <div>
                <input id="imgcolor_761_Fuchsia_Print" text="Fuchsia Print" class="emptyicon swatch" type="button" value="Fuchsia Print"></div>
            <div>
                <input id="imgcolor_761_Lavender_Solid" src="/Images/icon/Lavender_Solid.jpg" class="emptyicon swatch" type="image" value="Lavender_Solid"></div>
            <div>
                <input id="imgcolor_761_Marine_Print" src="/Images/icon/Marine_Print.jpg" class="emptyicon swatch" type="image" value="Marine_Print"></div>
            <div>
                <input id="imgcolor_761_Marine_Solid" src="/Images/icon/Marine_Solid.jpg" class="emptyicon swatch" type="image" value="Marine_Solid"></div>
            <div>
                <input id="imgcolor_761_Natural_Print" text="Natural Print" class="emptyicon swatch showborder" type="button" value="Natural Print"></div>
            <div>
                <input id="imgcolor_761_Natural_Solid" text="Natural Solid" class="emptyicon swatch" type="button" value="Natural Solid"></div>
            <div>
                <input id="imgcolor_761_Navy_Solid" src="/Images/icon/Navy_Solid.jpg" class="emptyicon swatch" type="image" value="Navy_Solid"></div>
            <div>
                <input id="imgcolor_761_Rose_Solid" src="/Images/icon/Rose_Solid.jpg" class="emptyicon swatch" type="image" value="Rose_Solid"></div>
            <div>
                <input id="imgcolor_761_Watermelon_Solid" text="Watermelon Solid" class="emptyicon swatch" type="button" value="Watermelon Solid"></div>
            <div>
                <input id="imgcolor_761_White_Solid" src="/Images/icon/White_Solid.jpg" class="emptyicon swatch" type="image" value="White_Solid"></div>
        </div>



<style>
    .emptyicon
    {
        width: 37px;
        height: 37px;
        float: left;
        font-size: 8px;
    }

    .sizewidth
    {
        width: 19px;
        height: 10px;
        padding: 5px 3px 8px 3px;
        margin: 2px;
    }



    .showborder
    {
        border: 1px solid black;
    }

    #product
    {
        border: 1px solid #c1c1c1;
    }

    .sizebtn
    {
        margin: 2px;
        height: 31px;
        width: 37px;
    }

    .icons
    {
        width: 213px;
        float: left;
        padding: 5px;
        margin: 5px;
    }

    .icons div
    {
        padding: 0px;
        float: left;
    }

    .icons input
    {
        padding: 0;
        cursor: pointer;
        text-align: center;
        background: #FFF;
        color: #000;
        display: block;
        height: 37px;
        width: 37px;
        line-height: 37px;
        font-size: .6em;
        overflow: hidden;
        float:left;
    }


    .sizes
    {
        float: left;
        width: 213px;
    }

    .sizes div
    {
        padding: 2px 0 0 2px;
        float: left;
    }

    .sizes input
    {
        padding: 0;
        cursor: pointer;
        text-align: center;
        background: #FFF;
        color: #000;
        display: block;
        height: 30px;
        width: 30px;
        font-size: 1.2em;
    }


    .configs
    {
        float: left;
        width: 279px;
    }

    .configs div
    {
        padding: 2px 0 0 2px;
        float: left;
    }

    .configs input
    {
        padding: 0;
        cursor: pointer;
        text-align: center;
        background: #FFF;
        color: #000;
        display: block;
        height: 30px;
        width: 30px;
        font-size: 1.2em;
    }

    .swatch
    {
    }
</style>


//Clicked on color: will change sizes backgrounds ( in stock or not)
$("[id^='imgcolor_761']").live("click", function () {
    //set style to no border for all

    $("[id^='imgcolor_761']").removeClass('showborder');
    $(this).addClass("showborder");

    return false;

});

如果您单击第一个（空）图像，它会在第二行的 div 周围移动。但是，当您单击输入（带有文本的键入按钮）时，它不会移动？当我将 showborder 边框更改为低于 1px 厚度的 10 时，它没有这个问题，但是我无法明确选择。

4

1 回答 1

1

添加以下样式：

.emptyicon {
    border: 1px solid white;
}

white背景的颜色在哪里。这样间距保持一致，您只需在单击时更改边框颜色。这是一个小提琴演示：http: //jsfiddle.net/crowjonah/y74AT/

于 2013-06-04T23:37:59.613 回答