html 为什么ul不撑开,给li设置float浮动属性之后,无法撑开外层ul的问题。
生活随笔
收集整理的這篇文章主要介紹了
html 为什么ul不撑开,给li设置float浮动属性之后,无法撑开外层ul的问题。
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以下面代碼為例,其實有好幾種解決方法,我用的這種并不是最簡單的。
給li設置float浮動屬性之后,無法撐開外層ul的問題。ul{
border: 1px solid #000;
width: 200px;
height: auto;
margin-top: 100px;
}
li{
float: left;
list-style: none;
margin-left: 10px;
}
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
- 星期六
- 星期天
以上代碼顯示結果如圖,ul的邊框變成了一條線,沒有被撐開,
可是我期望的效果是這樣的:
4種解決辦法:
第1種方法:在html代碼里邊給最后一個li后面加空元素清除浮動,div可以換成p或者其他。具體如下:
- 星期一
- 星期二
- 星期三
- 星期四
- 星期五
- 星期六
- 星期天
第2種方法:給ul設置固定的高度。
第3種方法:給ul設置overflow屬性,也可以是overflow:hidden。
第4種方法:給ul加浮動屬性,可以換成float:right,但是很有可能布局就會收到影響。
推薦閱讀
總結
以上是生活随笔為你收集整理的html 为什么ul不撑开,给li设置float浮动属性之后,无法撑开外层ul的问题。的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: php symfony 安装,Symfo
- 下一篇: ddr4服务器内存和普通内存_服务器内存