zoukankan      html  css  js  c++  java
  • ul下的li浮动,如何是ul有li的高度

    此时ul展示的界面为:

    ①给ul加上一个样式,display:inline-block;

    <html>
    <head>
    <title>float</title>
    <style>
        ul{
            display: inline-block;
            border:1px solid #000;
        }
        ul li{
            border:1px solid #f00;
            float:left;
        }
    </style>
    </head>
    <body>
    <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    </ul>
    </body>
    </html>

    程序截图:

    ②给ul加上样式,float:left

    <html>
    <head>
    <title>float</title>
    <style>
        ul{
            float: left;
            border:1px solid #000;
        }
        ul li{
            border:1px solid #f00;
            float:left;
        }
    </style>
    </head>
    <body>
    <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    </ul>
    </body>
    </html>

    程序运行结果:

    ③给ul加上样式,overflow:hidden;

    <html>
    <head>
    <title>float</title>
    <style>
        ul{
            overflow: hidden;
            border:1px solid #000;
        }
        ul li{
            border:1px solid #f00;
            float:left;
        }
    </style>
    </head>
    <body>
    <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    </ul>
    </body>
    </html>

    程序运行结果:

      暂时先把解决办法贴出来,待我后面好好研究过再来仔细分析一下。

  • 相关阅读:
    列表 元组
    前端 3
    前端 2
    python pymysql 表和数据的备份
    python 树 索引
    python 数据库连表查询习题
    python 数据库表查询
    python 数据库usdr 查询
    python set enum 完整性约束
    python 数据库表操作
  • 原文地址:https://www.cnblogs.com/jq-melody/p/4463581.html
Copyright © 2011-2022 走看看