负边距的应用

HTML:

                    <tr>
                        <td class="PX15 widthTD1 textRight heightFirst" valign="top"><div class="paddingTop12">机器尺寸:</div></td>
                        <td class="PX15 widthTD2 heightFirst">
                            <ul class="widthTD2" id="chooseServer">
                                <li>
                                    <div class="activeServer" onclick="tabServer(this);">1U服务器</div>
                                </li>
                                <li>
                                    <div class="defaultServer" onclick="tabServer(this);">2U服务器</div>
                                </li>
                                <li>
                                    <div class="defaultServer" onclick="tabServer(this);">4U服务器</div>
                                </li>
                            </ul>
                        </td>
                    </tr>

CSS:

.widthTD1{
    width:93px;
}
.widthTD2{
    width:616px;
}
.colorDefault{
    color:#565758;
}
.textLeft{
    text-align:left;
}
.textRight{
    text-align:right;
}
#trusteeshipTable tr td ul{
    width:616px;
}
#chooseServer{
    height:54px;
}
#chooseServer li{
    float:left;
    width:188px;
    height:40px;
    line-height:40px;
    margin-left:11px;
    margin-top:7px;
}
#chooseServer li div{
    float:left;
    width:100%;
    height:33px;
    line-height:33px;
}
.defaultServer{
    background-color:#FAFAFA;
    border:#E5E5E5 solid 1px;
    margin-top:0px;
    margin-left:0px;
}
.activeServer{
    background-color:#fff;
    border:#FF7E00 solid 2px;
    margin-top:-1px;
    margin-left:-1px;
}
.trusteeshipTable tr td{
}
.heightFirst{
    height:54px;
}
.paddingTop12{
    padding-top:12px;
}
原文地址:https://www.cnblogs.com/mazey/p/6364191.html