Question

一位css新手所以这里有：我试图获得正确的CSS，但当我点击不同的div并添加一个边框时，它会移动其他div +输入。举个例子来看看：

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;

});

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

Answer 1

添加以下样式：

.emptyicon {
    border: 1px solid white;
}

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

css：border stuffs up div

1 个答案: