此时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>

程序运行结果：

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

ul下的li浮动，如何是ul有li的高度的更多相关文章

  1. li浮动引起ul高度坍陷的解决方法

    我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就 ...

  2. 遍历ul下的li，点击弹出li的索引

    首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...

  3. 清除ul li里面的浮动并让ul自适应高度的一个好办法

    有时候会遇到ul li列表里面的东西会用到浮动,这个时候ul的高度就不会被撑开,这怎么办呢? 1)最笨的方法就是设置ul的高度,但这种方法很死板,高度不能自适应 2)有次我试着在ul里面加一个清除浮动 ...

  4. jquery选择div下的ul下的li下的a

    使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").ch ...

  5. CSS学习笔记（5）--导航ul，li浮动问题

    为什么只给li设置浮动,没有给ul设置浮动,ul后的元素div也会跟着浮动?   添加评论 分享   默认排序按时间排序 3 个回答   张思远 程序员 2 人赞同 代码是不是这样的啊?<ul& ...

  6. JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容

    这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li&quo ...

  7. jquery获取ul下的所有li个数

    通过jquery获取ul下所有li的个数(eg) $("ul li").length 通过jquery设置标签css的样式(eg)$("#div").css({ ...

  8. 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...

  9. 关于<ul> 下的 <li> 里面的<a> 标签字体颜色不能控制

    1.元展示 <ul class="ul"> <li><a href="#">菜单一</a></li> ...

随机推荐

  1. Docker资源限制实现——cgroup

    摘要 随着Docker技术被越来越多的个人.企业所接受,其用途也越来越广泛.Docker资源管理包含对CPU.内存.IO等资源的限制,但大部分Docker使用者在使用资源管理接口时往往还比较模糊. 本 ...

  2. 高级算法设计讲义 Lecture Notes for Advanced Algorithm Design

    (Last modification: 2012-12-17) Textbooks: (1) David Williamson, David Shmoys. The Design of Approxi ...

  3. 23. 客户默认选项（Default Customer Options）

    Editing Email Templates Email Sender Contact Us

  4. C++与Java语法上的不同

    最近学习算法和刷题基本都是用C++写的程序,在这个过程中,发现C++和Java在语法上有很多相同点,但也有很多不同点,而这些不同点对于已经掌握Java的程序员来说,理解C++代码可能会有些吃力甚至困难 ...

  5. C语言里字符串的解析

      根据给定的字符串,按照一定规则解析字符串,卡住好几次,这次做个笔记,以供参考 函数名称:   strtok 函数原型:   char *strtok(char *s1, const char *s ...

  6. 【dotnet跨平台】&quot;dotnet restore&quot;和&quot;dotnet run&quot;都做了些什么？

    [dotnet跨平台]"dotnet restore"和"dotnet run"都做了些什么? 前言: 关于dotnet跨平台的相关内容.能够參考:跨平台.NE ...

  7. linux输入子系统（6）-input子系统介绍及结构图

    注:本系列转自: http://www.ourunix.org/post/290.html input子系统介绍         输入设备(如按键,键盘,触摸屏,鼠标,蜂鸣器等)是典型的字符设备,其一 ...

  8. windows下使用F2PY编译fortran文件的问题

    在windo系统下F2PY不支持gcc+gfortran的组合,解决的办法: 1.安装mingw和msys,在msys环境下使用F2PY调用gcc+gfortran进行编译 2.放弃F2PY,直接gf ...

  9. Python 学习资料分享

    有同学需要学习 Python,确实,随着人工智能被炒的火热,再加上大数据时代,作为程序员的我们,怎么可能坐得住,必须尝尝鲜,给自己增加一项技能,增加自己的竞争了. 内容定位 这方面的学习资料比较多,本 ...

  10. Liunx之Lamp搭建笔记

    1:LAMP源代码搭建用户关系 a.  apache服务以daemon用户的处理请求.以root身份作为主进程. b. php源代码安装,会在httpd.conf文件里自己主动增加调用模块.可是在该文 ...