CSS：li标签实现对称效果

Alexads

7年前

布局：ul中4个li标签，以中间为轴对称

分析：浮动，50%，box-sizing，padding

注意：要实现分块区域对称，li不能加margin,会被挤下来，应加上padding后设置a元素背景白色，即与大背景分离

css 对称分布效果

CSS:

 .nav_two li{float:left;
    width:50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    --box-sizing: border-box;
    box-sizing: border-box;opadding:8px;}

.nav_two li a{display:block;
    background:#fff;
    height:65px;
    width:100%;
    -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);}