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. HTML <form> target 属性

    浏览器支持 所有主流浏览器都支持 target 属性. 定义和用法 target 属性规定一个名称或一个关键词,指示在何处打开 action URL,即在何处显示提交表单后接收到的响应. target ...

  2. js 随机数组

    生成指定num-start 个数组长度,值为start---num 的随机数组,不包括num这个值 function rand_arr(num,start) { // 验证值 if(!argument ...

  3. abp + angular 项目 图标字体注意事项

    用的字体建议下载到本地,否则部署环境没有网络的话,则图片字体会不正常显示.

  4. Celery 大量任务 分发

    Celery是由Python开发的一个简单.灵活.可靠的处理大量任务的分发系统,它不仅支持实时处理也支持任务调度. user:用户程序,用于告知celery去执行一个任务. broker: 存放任务( ...

  5. gym101964G Matrix Queries seerc2018k题 cdq分治

    题目传送门 题目大意: 二维平面上有q次操作,每次操作可以是添加一个点,也可以是添加一个矩形,问每次操作后,有多少  点-矩形  这样的pair,pair的条件是点被矩形覆盖(边缘覆盖也算). 思路: ...

  6. ZOJ - 1539 记忆化搜索

    注意不要仅搜DP(1e7),因为这不是线性的 #include<iostream> #include<algorithm> #include<cstdio> #in ...

  7. UVALive - 5963 ad-hoc

    注意到合法条件是对称的,那很有可能与2有关, 小于2表示没有这一页,大于2表示冲突了 我也不知道这样做对不对的(输入范围很迷),试一下就A了... #include<bits/stdc++.h& ...

  8. hadoop 配置安装

    1.   下载hadoop 压缩包,   拷贝到 /usr/hadoop目录下   tar -zxvf  hadoop-2.7.1.tar.gz, 比如: 127.0.0.1 localhost 19 ...

  9. Python入门笔记——（1）数字与表达式

    一.算术运算 整除:// 取余:% 乘方:** (a ** b = pow(a, b)) 十六进制表示:0x...,八进制表示0... round(x [, n]):对x从小数点第n位取四舍五入结果, ...

  10. C# 清空数组Array.Clear

    using System; using System.Collections; using System.Collections.Generic; using UnityEngine; public ...