Css案例整理
1.实现两个div并排显示
案例：checkbox的标题和内容需要并排显示，checkbox竖向排列
<head>
<style type="text/css">
.curr_box {
margin-top: 10px;
}
.row1 {
float: right;
width: 65%;
position: relative;
}
label {
float: left;
height: 17px;
width: 25%;
text-align: center;
margin-top: 5px;
}
.checkbox-inline1 {
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
width: 78%;
}
</style>
<title>我的第一个 HTML 页面</title>
</head> <body>
<div class="curr_box">
<div>
<label>有无肇事肇祸行为</label>
</div>
<div class="row1">
<div class="checkbox-inline1">
<input type="checkbox" name="isPsychoService" value="1"> 有肇事行为
</div>
<div class="checkbox-inline1">
<input type="checkbox" name="isPsychoService" value="2"> 有肇祸行为
</div>
<div class="checkbox-inline1">
<input type="checkbox" name="isPsychoService" value="3"> 轻度滋事
</div>
</div>
</div>
</body> </html>
这里使用的是float浮动，只要子div的长度小于父div的长度，就可以实现并排效果
还有就是使用position进行绝对定位
<html> <head>
<style type="text/css">
.curr_box {
margin-top: 10px;
}
.row1 {
width: 65%;
margin-left: 150px;
}
label {
position: absolute;
height: 17px;
width: 25%;
text-align: center;
margin-top: 5px;
}
.checkbox-inline1 {
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
width: 78%;
}
</style>
<title>我的第一个 HTML 页面</title>
</head> <body>
<div class="curr_box">
<div>
<label>有无肇事肇祸行为</label>
</div>
<div class="row1">
<div class="checkbox-inline1">
<input type="checkbox" name="isPsychoService" value="1"> 有肇事行为
</div>
<div class="checkbox-inline1">
<input type="checkbox" name="isPsychoService" value="2"> 有肇祸行为
</div>
<div class="checkbox-inline1">
<input type="checkbox" name="isPsychoService" value="3"> 轻度滋事
</div>
</div>
</div>
</body> </html>
在这里提醒一点，如果绝对定位没有设置top,left属性的，该元素就是块级元素，会换行显示，如果加了top等属性，会以父元素最为参考系
Css案例整理的更多相关文章
- css hack整理：区别FF，IE8，IE7，IE6，SF，CH浏览器
css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论 前端开发最要命的事就是处理浏览器的兼容性问 ...
- CSS精心整理的面试题
CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css命名整理
.container { width: 720px; background: #fafafa; border: 2px dashed #999; padding: 10px; float: left ...
- 前端CSS规范整理_转载、、、
一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...
- css代码整理、收集
整理了一下之前用到过的css代码,实现一种效果或许有许多种写法,我这里整理了一下我个人认为兼容性比较好,结构比较简洁的代码……如有写得不对的地方敬请前辈们指点赐教一下,小弟不胜感激!此学习笔记是动态的 ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- [转]前端CSS规范整理
一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用 ...
- CSS 知识点整理
本文是我整理的关于CSS的部分基础知识点,适合正在准备前端工作面试的人做简单回顾. 1. 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. Mar ...
随机推荐
- Mariadb/Mysql命令行常用命令
一.初始化等 1.登陆数据库方法 mysql -u 用户名 -p 用户密码 2.修改root及用户密码 use mysql; update user set password=password( ...
- [转帖]Nginx为什么高效？一文搞明白Nginx核心原理
Nginx为什么高效?一文搞明白Nginx核心原理 咔咔侃技术 2019-09-06 15:37:00 https://www.toutiao.com/a6733057587622707724/ Ng ...
- Centos7.3安装sonarqube
安装使用sonarqube 前置依赖 mysql 5.6 or 5.7 jdk 1.8 1.下载 https:/ ...
- python读写文件的操作
编程语言中,我们经常会和文件和文件夹打交道,这篇文章主要讲的是Python中,读写文件的常用操作: 一.打开文件 openFile = open('../Files/exampleFile.txt', ...
- go defer 语句会延迟函数的执行直到上层函数返回。
defer code... 可以理解为 执行完当前defer所在的方法代码后执行defer 中的代码 常用在释放资源 比如 关闭文件 为防止忘记编写关闭代码 可以先写好 defer 各种释放资源 ...
- Vs code 下设置python tasks.json
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.jso ...
- Django-redis配置cache和session
CACHES = { "default": { "BACKEND": "django_redis.cache.RedisCache", &q ...
- C#基础--go to
goto语句的用法非常灵活,你可以用它实现很多功能,但是由于goto语句的跳转影响程序的结构,在使用的时候会使人迷茫,所以一般"教材"上都不建议使用,但是用它可以实现递归,循环,选 ...
- asp.net core 2.0发布到IIS报错解决方案
大体来说,是环境的问题. 第一个错误,如图: 1. 查了网上说是文件夹权限的问题,依次设置了Everyone权限和IIS_IUSER权限,能勾选的都勾选了,然而并没有什么用,看来不是这个问题导致的. ...
- testwebsite
testwebsite ------------------------------------------------------------------ Creating Test environ ...