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;
            }

  • 相关阅读:
    idea 配置mapper.xml代码提示
    vue配置请求转发解决跨域问题
    MySQL 连接出现 Authentication plugin 'caching_sha2_password' cannot be loaded
    判断链表是否有环(Java实现)
    Java实现链表反转(借助栈实现)
    IHS代理遇到404的问题
    麒峰可视化表单设计器vue版本
    2021.5.30发布内容
    表单常见问题说明
    排序算法与查找算法在项目中的实际应用
  • 原文地址:https://www.cnblogs.com/dreamhouse/p/2921697.html
Copyright © 2011-2022 走看看