此时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. .net core mvc启动顺序以及主要部件1

    原文:.net core mvc启动顺序以及主要部件1 首先我是新人一个写这些东西也是为了增加记忆,有不对的地方请多多指教. 说回正题,打开Program.cs文件,看到在有个CrateWebHost ...

  2. TeX系列: tikz-3dplot绘图宏包

    tikz-3dplot包提供了针对TikZ的命令和坐标变换样式, 能够相对直接地绘制三维坐标系统和简单三维图形. tikz-3dplot包当前处于初创期, 有很多功能有待完善. 安装过程如下: (1) ...

  3. 怎样使用1M的内存排序100万个8位数

    今天看到这篇文章.颇为震撼.感叹算法之"神通". 借助于合适的算法能够完毕看似不可能的事情. 最早这个问题是在Stack Overflow站点上面给出的(Sorting numbe ...

  4. android 内部文件读取

    Android 文件管理方法 Android使用的是基于Linux的文件系统,对于文件的訪问和管理是通过权限设置来限制的. 在Linux系统中,文件权限分别描写叙述了创建者.同组用户和其它用户对文件的 ...

  5. Codeforces Round #258 (Div. 2/A)/Codeforces451A_Game With Sticks

    解题报告 http://blog.csdn.net/juncoder/article/details/38102263 n和m跟木棍相交,问一人取一交点(必须是交点.且取完后去掉交点的两根木棍),最后 ...

  6. Oracle创建JOB定时任务

    --- DECLARE JOB NUMBER;BEGIN      DBMS_JOB.SUBMIT(          JOB=>JOB,          WHAT=>'CTABLE_T ...

  7. hunnu--11545--小明的烦恼——找路径

    小明的烦恼--找路径  Time Limit: 2000ms, Special Time Limit:5000ms, Memory Limit:32768KB Total submit users:  ...

  8. DICOM-RT：放疗流程与參与角色

    背景: 放疗是一个复杂的过程,同一时候须要肿瘤医师.模拟定位技师.剂量师.物理师.治疗技师.护士等多重角色參与.总体流程涉及到成像系统.定位系统.计划系统.治疗系统.质控QA系统.信息管理系统等多个独 ...

  9. OpenStack Live Migration

    About live migration of KVM virtual machines with NFS storage, from Mirantis blog: click this link w ...

  10. 基于PHP函数的alert弹框

    可以设置弹出信息,跳转地址,跳转的时间,跳转的信息标题提示: 手机端加上<meta name='viewport' content='width=device-width, initial-sc ...