1、解决搜索框和按钮不对齐的方法

vertical-align属性只有两个元素设置为display：inline-block才有效

2、盒子莫名的分行现象

问题描述：比如父盒子宽度为960px，两个左右子盒子宽度分别为500px和440px，设置display：inline-block或者float，其中左盒子设置margin-right：20px；按照理想状态下，两个左右子盒子应该在同一行显示，然而实际情况下却分行，右盒子掉入了下一行。

问题分析：造成这个问题的原因是浏览器默认给两个不相连的元素一定的间隔，比如下图，li元素设置为浮动或者display：inline-block，那么它们之间肯定会一定的间隔

解决方法：将两个元素放在同一行，相连，不能由空格，如下图的两个section元素紧挨在一块

CSS布局中的问题解决方式的更多相关文章

  1. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  2. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  3. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  6. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  7. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  8. CSS布局中——导航是非常常见的

    导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type=" ...

  9. Flutter Stack布局中定位的方式

    前言 想要记录一下Stack布局中,定位的两种方式 代码 //……省略无关代码…… child: new Column( children: <Widget>[ new SizedBox( ...

随机推荐

  1. sed的基本用法

    了解sed的基本参数 sed匹配的方法: '//'p, 此符号与grep的引号类似,但sed是一定加此符号的,且还要加上-n的参数,匹配起来相当麻烦.sed匹配的方法: '//'pI 加上I的参数是指 ...

  2. chrome 相关设置.

    1. 使用chrome 添加道桌面的快捷方式,自动打开两个 tab 解决方法: chrome://apps/ 右击 你的应用图标..勾选在新窗口打开.

  3. 【记录】sqli-labs-master搭建

    附上:链接:http://pan.baidu.com/s/1bpCRzl1 密码:ep48 下载完成后直接解压到phpstudy(该工具之前分享过,直接搜索下)的WWW目录下,启动phpstudy, ...

  4. C#串口编程 操作硬件

    -------通过USB将硬件连接PC, 更新USB驱动,使用下面方法可控制相关设备. //1声明一个串口对象 public static SerialPort MainModule_Port_ = ...

  5. method reference

    import java.util.Arrays; import java.util.List; import java.util.function.Function; import java.util ...

  6. 《The Python Tutorial》——Errors and Exceptions 阅读笔记

    Errors and Exceptions 官方文档:https://docs.python.org/3.5/tutorial/errors.html python中所有的异常都继承自BaseExce ...

  7. do while循环

    do while循环: 语法格式: do{ 循环体 }while(循环条件); 执行流程: 先执行循环体,然后判断条件,当条件为true时,则继续执行循环体,然后再判断条件... 一直到循环条件为fa ...

  8. linux运维基础知识

    linux运维基础知识大全 一,序言 每一个微不足道的知识,也是未来的铺垫.每一份工作的薪资职位,也是曾经努力的结果. 二,服务器 1,运维人员工作职责: 1)保证数据不丢失:2)保证服务器24小时运 ...

  9. 剑指offer第3题：从尾到头打印链表

    方法一:采用栈来存储,用ArrayList保存.注意题目给出的输出结果是ArrayList import java.util.ArrayList; import java.util.Stack; pu ...

  10. Thinking in java源码下载链接

    Thinking in java书上显示的下载源码到www.mindview.net站点,但是这个站点打不开了,后来找到真正的下载地址,贴于此. http://www.mindviewinc.com/ ...