此时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. DELPHI方法注释的标准写法

    /// <summary> /// 查询数据 /// </summary> /// <param name="accountno">帐套号< ...

  2. 深入理解iPhone数据持久化(手把手教你iphone开发 – 基础篇)

    在所有的移动开发平台数据持久化都是很重要的部分:在j2me中是rms或保存在应用程序的目录中,在symbian中可以保存在相应的磁盘目录中和数据库中.symbian中因为权限认证的原因,在3rd上大多 ...

  3. BUPT复试专题—字符串处理(2016)

    题目描述 有以下三种操作. (1)COPY l r(0<=l<=r<n),n代表s串的长度.这个表示将s串从l到r的序列复制到剪贴板t里面,覆盖t字符串. 例如s为abcde     ...

  4. [转]通俗易懂的php多线程解决方案

    原文: https://www.w3cschool.cn/php/php-thread.html --------------------------------------------------- ...

  5. python 学习笔记 13 -- 经常使用的时间模块之time

    Python 没有包括相应日期和时间的内置类型.只是提供了3个相应的模块,能够採用多种表示管理日期和时间值: *    time 模块由底层C库提供与时间相关的函数.它包括一些函数用于获取时钟时间和处 ...

  6. ubuntu 16.04 更新后搜狗输入法无法输入中文的问题

    方法一:重启搜狗输入法 通过下面的两个命令重启搜狗输入法,看重启后是否可以正常使用: ~$ killall fcitx  ~$ killall sogou-qinpanel   方法二:检查修复安装依 ...

  7. Page Design for Sexable Forum

    Design Demo 1. Home of Sexable Forum 1.1  home page not logined. 1,2 home page logined. 2. Pages wit ...

  8. DoubleViewPager

    https://github.com/eltld/DoubleViewPager https://github.com/eltld/DoubleViewPagerSample

  9. Tomcat配置，Myeclipse破解和各种设置

    转自:http://www.cnblogs.com/tyjsjl/archive/2006/11/14/2156111.html 根据tomcat来配置eclipse和MyEclipse结合使用起来, ...

  10. atitit.eclipse有多少api&#160;&#160;扩展点,以及扩展点的设计

    atitit.eclipse有多少api  扩展点,以及扩展点的设计 不赞成使用的.作废的以及内部的扩展点 ［扩展］页显示了几个你不应该在你的插件中使用的扩展点.在附表C.1的［描写叙述］栏中.我们使 ...