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的边框变成了一条线,没有被撑开,

85fcc708f32e63a07afada79168b5387.png

可是我期望的效果是这样的:

c27da0b209d857268455f3ad3c7ec554.png

4种解决办法:

第1种方法:在html代码里边给最后一个li后面加空元素清除浮动,div可以换成p或者其他。具体如下:

  • 星期一
  • 星期二
  • 星期三
  • 星期四
  • 星期五
  • 星期六
  • 星期天

第2种方法:给ul设置固定的高度。

第3种方法:给ul设置overflow属性,也可以是overflow:hidden。

第4种方法:给ul加浮动属性,可以换成float:right,但是很有可能布局就会收到影响。

推荐阅读

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/560021.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机黑屏无法启动,电脑黑屏无法启动怎么办

有网友说自己的电脑黑屏无法启动,具体现象就是开机以后,主机电源灯亮,但显示没有任何显示。那么电脑黑屏无法启动的原因很多,下面小编就给大家分享下电脑不能开机黑屏的解决方法。静电影响:1、当出现不能开机的问题时&…

测试显卡的软件叫游戏什么,显卡测试软件哪个好

显卡测试软件哪个好3DMARK063DMark06于2006年1月17日发布,主要使用最新一代游戏技术衡量DirectX 9级别的3D硬件。此前的3DMark都是随着新版DirectX和新一代硬件的发布而推出,在一定程度上限制了3DMark对最新硬件性能的充分挖掘。现在,DirectX…

华润置地php面试题_长春华润置地崑崙御,以至臻匠心,成就城市典范

点击上方蓝字,记得关注我们!长春华润置地崑崙御,以至臻匠心,成就城市典范每一次启程都是为了更好的遇见,每一次出发都是为了更高的追求。6月23日,集精工匠心所筑,汇万千美好所成,华润置地崑崙御…

数据消费过程_特色鲜卤现捞加盟店经营要如何抓准消费群体定位

唐小卤是市场上摸爬滚打了这么多年,认为对市场来说,有成功的创业者标明,在目前的行业中,谁能抓住女性消费者,谁就能占领更多的市场份额,诚然,女性消费者在市场里占领了重要地位,这在…

做形态学方法的团队_图像分割实战-分水岭分割方法和GrabCut 算法

1. 分水岭分割方法它是依赖于形态学的,图像的灰度等级不一样,如果图像的灰度等级一样的情况下怎么人为的把它造成不一样?可以通过距离变换实现,这样它们的灰度值就有了阶梯状的变换。风水岭算法常见的有三种方法:&…

计算机gt的使用方法,旗舰级综合效果器 BOSS GT-1000使用宝典(二) | 基础操作

原标题:旗舰级综合效果器 BOSS GT-1000使用宝典(二) | 基础操作在上一期的使用宝典中,B老板为大家介绍了GT-1000内置的前级,箱体及麦克风等,👉 GT-1000使用宝典(一) | 了解你的神器 想必各位对自己手中的神器有了比较全…

日期格式化为yyyymmdd_你还在用SimpleDateFormat格式化时间嘛

Jdk1.8之时间处理该文章已经同步到Github:https://github.com/stackInk/makerstack1. 传统时间处理的问题1.1 多线程环境下的SimpleDateFormat当多个线程使用同一个时间处理对象进行对日期的格式化的时候,会出现java.lang.NumberFormatException: multip…

存储ic载板_延伸IC领域 崇达技术拟将持有普诺威55%股权

立即加星标每天看好文PCB网城讯崇达技术7月1日公告,6月30日,崇达技术股份有限公司(以下简称“崇达技术”)与朱小红、马洪伟在公司会议室签署了《关于江苏普诺威电子股份有限公司之股份转让协议》(以下简称“协议”)。根据协议,公司拟以自有资…

微云服务器失败原因_梦幻西游:服务器发生异常?游戏出现明显卡顿感,正在排查问题...

就在刚刚,不少梦幻玩家都在讨论一个情况,那就是服务器出现了明显的卡顿感,一些商人也陆续掉线,难道是服务器出现了异常?退出游戏之后,一直无法进入,登录界面总是停留在"正在连接某某服务器…

maven多模块项目部署到服务器,GitHub - baxias/foweb: 一个基于 Spring+SpringMVC+Mybatis 的Maven多模块项目。(实现前后端分离的服务器端)...

Foweb FrameworkA multi-modules maven project base on SpringSpringMVCMybatis.一个基于 SpringSpringMVCMybatis 的Maven多模块项目。使用文档两种使用方式:1. 直接将项目download下来,然后在IDE(Eclipse或者IDEA)中以maven项目导入,注意这…

网站需要数据库服务器吗,网站需要独立的服务器数据库吗

网站需要独立的服务器数据库吗 内容精选换一换文档数据库服务提供使用数据管理服务(Data Admin Service,简称DAS)、内网和公网的连接方式。文档数据库服务默认为您开通了远程主机登录权限,推荐您使用更安全便捷的数据管理服务连接实例,具体请…

只提取单元格中的数字_提取Excel单元格中的数字(4类)及原理

文中总结了4类从包含有中文、字母、数字的单元格数据中只提取数字的公式。(使用的时候把单元格名称改为实际的单元格名称即可)。1.提取文本左侧数据当单元格中数字在左侧,文字内容在右侧时,我们可以使用一下公式来将数字快速提取出来。函数公式&#xff…

delphi 执行长时间存储过程 显示进度_项目管理_十大管理体系之「项目进度管理」知识整理及心得分享...

项目进度管理项目进度管理在项目是项目管理三大要素之一,在项目管理中占有非常重要的地位。往往很多项目要求进度节点是一个固定期限,无法修改,所以进度把控就显得尤为重要。什么是进度管理,在你写project项目计划时就非常清楚的可…

bettertouchtool闪退_BetterTouchTool for Mac 3.238 无闪退 触控板增强工具

BetterTouchTool为魔术鼠标添加了许多新的完全可自定义的手势,Multi-Touch MacBook触控板和Magic Trackpad。这些手势是可定制的:魔术鼠标:捏合/缩小(缩放)单指点击左边单指轻拍右键单指中间单指轻拍单指点击中间双指轻敲双指点击双指轻扫(上…

宝塔php扩展fil_宝塔面板安装Redis给WordPress网站加速优化教程

宝塔面板php安装redis缓存以加快WordPress的开启速度,因为WordPress打开速度慢,所以霜天 seo使用多种方式来提高wordpress的加载速度,其中一个好办法是:使用redis加速缓存。本文的主题是宝塔面板php安装redis缓存加速WordPress&am…

常量缓存与integer比较_Integer缓存范围到底是多少?

本文主要大致思路为:不管从工作中还是面试,这篇文章都应该好好看完,本人认为是非常有用的。案例Integer是基本类型int的封装类。平时不管是入坑多年的小伙伴还在入坑路上的小伙伴,都应该知道的使用频率是相当高。下面模仿订单支付…

supervisor 子进程退出_用supervisor监管你的程序,不用担心程序挂了

1.背景无论多么优秀的程序员都难以避免写出来的程序会有崩溃的一天,特别是c、c这种高技术含量的语言,一不小心就来个段错误(segment fault),我们通常会写一个守护进程或者守护脚本,检测对应的进程是否退出,…

pta7-3 统计不及格人数_应用统计专硕院校专业难度分析【青岛大学、苏大、西安交通大学】...

原文链接:应用统计专硕院校专业难度分析【第十二期】​mp.weixin.qq.com应用统计专硕院校专业难度分析 【第十二期】TO:哈喽,小可爱们早上给你好呀!今天安安姐给你们更新经济类6个专硕院校专业难度分析专题第十二期,大…

mysql数据库事务有几种特性_面试官:你能说说事务的几个特性是啥?有哪几种隔离级别?...

1、面试题事务的几个特点是什么?数据库事务有哪些隔离级别?MySQL的默认隔离级别?2、面试官心里分析用mysql开发的三个基本面:存储引擎、索引,然后就是事务,你必须得用事务。因为一个业务系统里,…