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案例整理的更多相关文章

  1. css hack整理：区别FF，IE8，IE7，IE6，SF，CH浏览器

    css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论         前端开发最要命的事就是处理浏览器的兼容性问 ...

  2. CSS精心整理的面试题

    CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...

  3. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  4. css命名整理

    .container { width: 720px; background: #fafafa; border: 2px dashed #999; padding: 10px; float: left ...

  5. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  6. css代码整理、收集

    整理了一下之前用到过的css代码,实现一种效果或许有许多种写法,我这里整理了一下我个人认为兼容性比较好,结构比较简洁的代码……如有写得不对的地方敬请前辈们指点赐教一下,小弟不胜感激!此学习笔记是动态的 ...

  7. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  8. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  9. CSS 知识点整理

    本文是我整理的关于CSS的部分基础知识点,适合正在准备前端工作面试的人做简单回顾. 1. 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. Mar ...

随机推荐

  1. Opencv官方例程简介

    opencv sample文件夹例程 No1. adaptiveskindetector.cpp 利用HSV空间的色调信息的皮肤检测,背景不能有太多与肤色相似的颜色.效果不是特别好. No2. bag ...

  2. Mybatis映射文件sql语句注意事项

    1.插入

  3. 使用eclipse插件mybatis generator来自动生成实体类及映射文件

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE generatorConfiguratio ...

  4. springboot集成elk 四：springboot + Elasticsearch+Jest

    依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spri ...

  5. Mysql: Can not read response from server. Expected to read 4 bytes, read 0 bytes before connection was unexpectedly lost.

    2019-05-28 01:53:42.762 [message remind thread-24] ERROR druid.sql.Statement - {conn-10327, stmt-320 ...

  6. python实现文件搜索工具（简易版）

    在python学习过程中有一次需要进行GUI 的绘制, 而在python中有自带的库tkinter可以用来简单的GUI编写,于是转而学习tkinter库的使用. 学以致用,现在试着编写一个简单的磁文件 ...

  7. T100——错误信息提示传入参数显示

    LET l_str1 = l_xccc.xccc901LET l_str2 = l_inat015LET l_str = l_str1.trim(),'|',l_str2.trim() CALL cl ...

  8. 01 HTTP协议_servlet基础

    一.定义 http(Hyper Text Transfer Protocol):超文本传输协议 二.作用 数据传输 三.概念 HTTP消息: 1.客户端发向服务器的请求消息 2.服务器回给客户端的响应 ...

  9. 本地Pycharm将spark程序发送到远端spark集群进行处理

    前言 最近在搞hadoop+spark+python,所以就搭建了一个本地的hadoop环境,基础环境搭建地址hadoop2.7.7 分布式集群安装与配置,spark集群安装并集成到hadoop集群, ...

  10. Python+Appium启动手机APP或者浏览器

    一.设备信息配置 脚本如下: from appium import webdriver class my_app(): def __init__(self): desired_caps = {} # ...