关于li浮动的问题！求解_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

关于li浮动的问题！求解_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:04 PM

li求解浮动

先上图，

给li加入图片，然后设置第一个浮动，效果如上，，，可是，，
给li加上宽高之后就变成上面那样了，这是为什么，求解？

回复讨论(解决方案)

如果你想实现两列，那么ul设置两个li的宽，所有的li浮动即可

li是块状标签，本来就是要占用一行的，第一个你用了float:left，它左浮动让出右边的位置，第二个li就占用剩余的空间了，第二个没有浮动，就是占用一行了，所以最后一个就又另起一行了。第二种情况：li没有浮动，每个都是占一行，所以都是要换行的。

float设置后脱离正常流，第二个li元素上移

li设置宽度后，因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用，即第一行宽度内容已满，它里面的内容只能换行在第二行开始显示;而未设置宽度时，#one的宽度只是包含a字符的宽度，第二个li宽度默认则有100%UL的宽

第一种我懂，就是还是不太清楚为什么设了宽度之后，它的效果就不同了，（因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用）这句话我理解不了，求解答！谢谢

第一种我懂，就是还是不太清楚为什么设了宽度之后，它的效果就不同了，（因为#one与后面的li宽度相同，相当于第二个li块级元素中最左边被#one占用）这句话我理解不了，求解答！谢谢

浏览器渲染时，浮动元素叠加在正常流元素之上，第二个li元素宽度只有120px，高度自适应。而#one宽度也有120px，当它浮动至左端时，第二个li元素内容会靠近#one右端开始定位，空间不够时只能往下。你将第二个li元素宽度设置为大干120px，你也许就明白了

更多的时候，没必要太过纠结为什么会这样，因为这么干本身就是有兼容问题的，再比如文字环绕图片的效果，不同浏览器下呈现出来的也是不太一致的，没什么解决方案，只能是在做的时候就避开类似的布局

再比如，两个块级元素想在同排显示，很多人都会第一个设置浮动，第二个靠挤上来的方案，但是该种做法在IE6/7下符合一定条件时，会产生莫名的空白间隙，没法解决，只能统一设置浮动

如果你真的想要知道为什么会这样，我想你得从各大浏览器的底层渲染机制去了解，即便你了解了，也会避开类似的布局

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何用Python编写求解最小公倍数的算法？Sep 19, 2023 am 11:25 AM

如何用Python编写求解最小公倍数的算法？最小公倍数是指两个数中能够整除这两个数的最小整数。在数学中，求解最小公倍数是一项基本的数学任务，而在计算机编程中，我们可以使用Python来编写一个求解最小公倍数的算法。下面将介绍基本的最小公倍数算法，并给出具体的代码示例。最小公倍数的数学定义是：如果a能被n整除且b能被n整除，则n是a和b的最小公倍数。要求解最小

HTML、CSS和jQuery：制作一个带有浮动效果的按钮Oct 24, 2023 pm 12:09 PM

HTML、CSS和jQuery：制作一个带有浮动效果的按钮，需要具体代码示例引言：如今，网页设计已成为一种艺术形式，通过使用HTML、CSS和JavaScript等技术，我们能够为页面增加各种各样的特效和交互效果。本文将简要介绍如何用HTML、CSS和jQuery制作一个带有浮动效果的按钮，并提供具体的代码示例。一、HTML结构首先，我们需要在HTML文件中

li是什么元素Aug 03, 2023 am 11:19 AM

li是HTML标记语言中的一个元素，用于创建列表。li代表列表项，它是ul或ol的子元素，li标签的作用是定义列表中的每个项目。在HTML中，li元素通常与ul或ol元素配合使用来创建有序或无序列表，无序列表使用ul元素，列表项用li元素表示，而有序列表则使用ol元素，同样也用li元素表示。

html中li是什么Nov 19, 2021 pm 03:31 PM

在html中，li的英文全称为“list item”，意思为“列表项”，是一个定义列表项目的元素标签，语法“<li>列表项内容</li>”；“<li>”标签可用在有序列表 “<ol>”和无序列表“<ul>”中。

清除浮动有什么方法Feb 22, 2024 pm 04:00 PM

清除浮动有什么方法，需要具体代码示例在网页布局中，浮动是一种常用的布局方法，可以让元素脱离文档流，并相对其他元素进行定位。然而，使用浮动布局时常常会遇到一个问题，就是父元素无法正确地包裹浮动元素，导致页面产生布局错乱的情况。所以，我们需要采取措施来清除浮动，使得父元素能够正确地包裹浮动元素。清除浮动的方法有多种，下面将介绍常用的几种方法，并给出具体的代码示例

HTML布局技巧：如何使用position属性进行浮动元素控制Oct 21, 2023 am 09:22 AM

HTML布局技巧：如何使用position属性进行浮动元素控制在网页设计中，布局是非常重要的一环。通过合理的布局可以使网页更加美观、易读，提升用户体验。而在实现布局过程中，浮动元素的控制是其中一个关键点。HTML提供了position属性，通过这个属性我们可以实现对浮动元素的控制。本文将介绍如何使用position属性进行浮动元素的布局，并提供一些具体的代码

如何使用Python实现求解阶乘的算法？Sep 19, 2023 am 10:30 AM

如何使用Python实现求解阶乘的算法？阶乘是数学中的重要概念，指的是一个数乘上其自身减一，再乘上自身减一减一，以此类推，直到乘到1为止。阶乘通常用符号"!"来表示，例如5的阶乘表示为5!，计算公式为：5!=5×4×3×2×1=120。在Python中，我们可以使用循环来实现一个简单的阶乘算法。下面给出一个示例代码：deffacto

快速计算矩阵逆的方法 - Numpy实现Jan 24, 2024 am 08:47 AM

Numpy是Python中著名的科学计算库，为处理大型多维数组和矩阵提供了丰富的功能和高效的计算方法。在数据科学和机器学习领域，矩阵的逆运算是一项常见的任务。在本文中，我将介绍使用Numpy库快速求解矩阵逆的方法，并提供具体的代码示例。首先，让我们通过安装Numpy库引入它到我们的Python环境中。可以使用以下命令在终端中安装Numpy：pipinsta

See all articles