float浮动的一些基础常识
2024-09-19 21:25:01
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: ;padding: ;}
/* 先给定义的box一个高度和宽度 */
.box{width: 1200px;height: 50px;outline:1px red solid;margin:30px auto;}
/* 去除ul无序列表的全局样式 */
ul{list-style:none;}
/* 再给li的父级一个宽高 */
.box>ul{height: %;width: %;}
/* 再给li一个宽高 宽是父级除以他的子级的出来的*/
.box>ul>li{height:%;width: 150px;outline: 1px solid pink;
/* 这是左浮动，要想右浮动就直接把left改变成right; */
float: left;
/* 这里让li里面的内容在他的宽度里水平居中 */
text-align: center;
/* 这里是让li里面的内容在他的高度里面垂直居中 注：他的父级有多高那么就可以设置他的行高为多少 */
line-height: 50px;
}
</style> </head>
<body>
<div>
<!-- 这是一个外边框的盒子 -->
<div class="box">
<ul>
<li>你好！明天</li>
<li>你好！明天</li>
<li>你好！明天</li>
<li>你好！明天</li>
<li>你好！明天</li>
<li>你好！明天</li>
<li>你好！明天</li>
<li>你好！明天</li>
</ul>
</div>
</div>
</body> </html>
最新文章
- bootstrap-datetimepicker.js 设置开始时间的Bug。
- ios7之后 根据UILabel的文字计算frame的方法
- Sharepoint 问题集锦 - 配置
- Deme_遥感控制物体移动（涉及遮罩，小摄像机跟随）
- html5中的一些小知识点（CSS）
- Python导入模块的三种形式
- CSS3 使用选择器在页面插入内容
- 黄聪：Windows2012-IIS8安装SSL证书
- C++ 入门[1]
- Linux - 查看进程状态
- 基于Centos搭建个人 Leanote 云笔记本
- 01: 重写Django admin
- 【转】linux下终端命令快捷键
- MySQL<多表操作>
- C语言对表达式的求值顺序不是明确规定的
- 【mySQL】 - 主键
- BSGS算法+逆元 POJ 2417 Discrete Logging
- request接收表单提交数据及其中文参数乱码问题
- nginx日志切割总结
- RESTful api 与 Django的 restfulframework