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. ELK (Elasticsearch , Logstash, Kibana [+FileBeat])

    ELK 简述: ELK 是: Elasticsearch , Logstash, Kibana 简称, 它们都是开源软件. Elasticsearch[搜索]是个开源分布式基于Lucene的搜索引擎, ...

  2. CentOS 中查看软件的版本号

    CentOS  中查看软件的版本号 1. rpm 查看 [root@hadoop110 ~]# rpm -qa | grep mysql mysql-community-client--.el6.x8 ...

  3. Python之freshman04

    一.迭代器 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的 ...

  4. springMVC上传功能(单文件和多文件上传)

    单文件和多文件上传 首先在xxx-select.xml里面配置上传的大小和编码 <bean id="multipartResolver" class="org.sp ...

  5. CSS column 布局总结

    有时候 第一列 底部会跑到顶部那里一部分.这时候应该这样. 在 每个 div前加上 display:inline-block

  6. C++_异常5-异常规范和栈解退

    异常规范 异常规范的理念看似有前途,但实际的使用效果并不好. 忽视异常规范之前,您至少应该知道它是什么样的,如下所示: double harm(double a) throw(bad_thing);  ...

  7. HDU_2082 找单词 【母函数的应用】

    题目: 假设有x1个字母A, x2个字母B,..... x26个字母Z,同时假设字母A的价值为1,字母B的价值为2,..... 字母Z的价值为26.那么,对于给定的字母,可以找到多少价值<=50 ...

  8. 115th LeetCode Weekly Contest Prison Cells After N Days

    There are 8 prison cells in a row, and each cell is either occupied or vacant. Each day, whether the ...

  9. [转] 一文看懂npm、yarn、pnpm之间的区别

    [From] http://geek.csdn.net/news/detail/197339 原文:Understanding differences between npm, yarn and pn ...

  10. [转] log4j-over-slf4j与slf4j-log4j12共存stack overflow异常分析

    [From] http://www.tuicool.com/articles/INveIf 注:下文中的“桥接”.“转调”.“绑定”等词基本都是同一个概念. log4j-over-slf4j和slf4 ...