简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

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

WBOY
發布： 2016-06-24 11:31:17
原創
1247 人瀏覽過

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:value;}顯然，有多種方法可以使用JavaScrip...
來自於 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學習者快速成長！