css 四列布局中间空白技巧

来源：互联网发布：打广告软件编辑：程序博客网时间：2024/04/26 23:38

1190px 的容器  分成四列 每列290px，中间添加10px 的间距

但是每一列都添加margin-left:10px;最左侧就多出10px的问题

解决方案：外部容器直接添加 margin-left:-10px 冲抵掉多出来的10px 问题高效解决

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        div {            width: 1190px;            margin: 0px auto;        }        ul, li {            margin: 0px;            padding: 0px;            list-style: none;        }        li {            float: left;            margin-left: 10px;            width: 290px;            background-color: #ccc;;        }        ul {            margin-left: -10px;        }    </style></head><body><div>    <ul>        <li>第一个</li>        <li>第一个</li>        <li>第一个</li>        <li>第一个</li>    </ul></div></body></html>

1 0

css 四列布局 中间空白技巧

css 四列布局中间空白技巧