关于li浮动的问题！求解_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

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으로 문의하세요.

관련 기사

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.