Home > Web Front-end > HTML Tutorial > li元素右浮动会出现换行_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:31:17
Original
1311 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/

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template