简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

WBOY
Release： 2016-06-24 11:31:17
Original
1247 people have browsed it

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>
Copy after login

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

<ul id="box">  <li style="float:left"></li>  <li style="float:right"></li></ul>
Copy after login

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

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

Related labels：
li元素右浮动会出现换行
source：php.cn
Previous article：关于CSS伪类::before和transform的问题_html/css_WEB-ITnose Next article：DIV+CSS制作斜线效果记录_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Center button component in Next.js app? I'm using a button in my nextjs page which is on its own row. I want the button to appear ...
From 2023-09-18 22:05:21
0
1
318
Is there a CSS parent selector? How to select an element that is the direct parent of an anchor element? For example, my C...
From 2023-08-23 10:53:50
0
2
195
javascript - 这种评论表单的布局是怎么做出来的？ 这是简书的评论表单： 我的 html 结构如下： {代码...} 我设置头像 .avatar 元素左浮动，然后设置 textarea 的 width=100%，但是这样设置后 te...
From 2017-04-17 15:15:36
0
4
391
html5 - CSS3动画执行过程中导致显示模糊 问题：H5页面在执行元素的动画（如ZoomIn，循环5次）过程中，动画元素（如文字、图片等）会显示模糊，当动画执行完毕之后才会正常显示。 问题截图： 目前这个问题在PC端和移动端都...
From 2017-04-17 14:56:55
0
3
410
css3 - 自己做的CSS网格系统里面为什么两个div不能同行？ 两个width都是50%的div，设置了向左浮动，为什么它会出现换行？如果设置49%就不会了，这是为什么？
From 2017-04-17 11:13:46
0
8
543
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！