简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

li元素右浮动会出现换行_html/css_WEB-ITnose

WBOY
풀어 주다： 2016-06-24 11:31:17
원래의
1246명이 탐색했습니다.

li元素右浮动会出现换行:
一般情况下想让块级元素在一行显示，可以为元素施加浮动，但是有时候表现却并非如人愿，会出现换行的情况。
看如下代码:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{  padding:0;  margin:0;}#box{  width:250px;  list-style:none;}#box li{  width:100px;  height:30px;  background-color:green;}</style></head><body><ul id="box">  <li></li>  <li style="float:right"></li></ul></body></html>
로그인 후 복사

以上代码中，尽管右边的li采用了右浮动，但是还是出现了换行现象，下面就介绍一下解决方案:
解决方案:
在左边的li元素也采用浮动，代码修改如下:

<ul id="box">  <li style="float:left"></li>  <li style="float:right"></li></ul>
로그인 후 복사

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9738

更多内容可以参阅:http://www.softwhy.com/divcss/

관련 라벨：
li元素右浮动会出现换行
원천：php.cn
이전 기사：关于CSS伪类::before和transform的问题_html/css_WEB-ITnose 다음 기사：DIV+CSS制作斜线效果记录_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Next.js 앱의 가운데 버튼 구성요소가 있나요? 나는 자체 행에 있는 nextjs 페이지의 버튼을 사용하고 있습니다. 버튼을 페이지 중앙에 표시하고 싶은 이유는 PC와 모바일 모두에서 가장 잘 보일 것이라고 생...
에서 2023-09-18 22:05:21
0
1
318
CSS 부모 선택자가 있습니까? 앵커 요소의 직접 상위 요소를 선택하는 방법은 무엇입니까? 예를 들어 내 CSS는 다음과 같아야 합니다. li&lt;a.active{property:val...
에서 2023-08-23 10:53:50
0
2
195
javascript - 这种评论表单的布局是怎么做出来的？ 这是简书的评论表单： 我的 html 结构如下： {代码...} 我设置头像 .avatar 元素左浮动，然后设置 textarea 的 width=100%，但是这样设置后 te...
에서 2017-04-17 15:15:36
0
4
391
html5 - CSS3动画执行过程中导致显示模糊 问题：H5页面在执行元素的动画（如ZoomIn，循环5次）过程中，动画元素（如文字、图片等）会显示模糊，当动画执行完毕之后才会正常显示。 问题截图： 目前这个问题在PC端和移动端都...
에서 2017-04-17 14:56:55
0
3
410
css3 - 自己做的CSS网格系统里面为什么两个div不能同行？ 两个width都是50%的div，设置了向左浮动，为什么它会出现换行？如果设置49%就不会了，这是为什么？
에서 2017-04-17 11:13:46
0
8
543
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！