zoukankan      html  css  js  c++  java
  • 设置每个li的margin距离(巧设计)

               当我们在一个div里面包含头、中(ul和li)、尾i的话,如果设置每一个li的margin属性的话,那么虽然每个li都有距离了,但是整体的间距是不和谐的,这里需要设置ul的margin属性,代码如下:

    <div class="contain">
            <div class="head"></div>
            <div class="main">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <div class="foot"></div>
    </div>

    CSS样式:

         .contain
            {
                78px;
                border: 1px solid red;
            }
            .contain .head
            {
                78px;
                height: 12px;
                background-color: Orange;
            }
            .contain .main
            {
                78px;
            }
            .contain .main ul
            {
                margin: 0;
                padding: 0; /*ff*/
                margin-bottom: 10px; /*离下面的距离*/
            }
            .contain .main ul li
            {
                39px;
                height: 35px;
                margin: 0 auto;
                margin-top: 10px; /*离顶部的距离*/
                list-style-type: none;
                border: 1px solid red;
            }
            .contain .foot
            {
                78px;
                height: 12px;
                background-color: Orange;
            }

  • 相关阅读:
    3delight and useBackground
    Maya 闪电
    jcCut1.1 在Maya里实现切割物体
    jcFeather 2.3.0 Demo
    javascript深度克隆的方法
    前端调用本地摄像头实现拍照(vue) Allen
    《暗时间》 读书笔记
    阅读笔记3流浪动物救助实践困境与路径优化
    阅读笔记1濒危动物网页的设计构思
    阅读笔记2电子宠物系统设计
  • 原文地址:https://www.cnblogs.com/dreamhouse/p/2921697.html
Copyright © 2011-2022 走看看