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. Linux下parted分区超过2TB硬盘-分区格式化

    1.parted 设备名进入分区 parted /dev/vdb 2.输入print打印列出当前分区设备的磁盘容量大小 3.设置磁盘分区为gpt模 mklabel gpt 然后点击YES继续(提示磁盘 ...

  2. Call requires API level 11 (current min is 8)报错

    新建一个Android Application Project,其中MainActivity.java中报错如下 Call requires API level 11(current min is 8 ...

  3. wzoi（栈模拟）

    链接:https://ac.nowcoder.com/acm/contest/332/I 来源:牛客网 题目描述 bleaves 最近在 wzoi 上面做题. wzoi 的题目有两种,一种是 noip ...

  4. FJOI2019划水记

    Day 0 和 $crk$ 神仙颓废 $crk$ 雀魂一位率 $40%$ $orz$,不知道的人怕不是以为开小号 晚上想早点睡觉,从 9 点躺到 12 点才睡着 Day 1 反正划水,心态良好,全写暴 ...

  5. [转] Spring Boot中Web应用的统一异常处理

    [From] http://blog.didispace.com/springbootexception/ 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供 ...

  6. PIE SDK过滤

    1. 算法功能简介 过滤功能使用斑点分组方法来消除分类文件中被隔离的分类像元,用以解决分类图像中出现的孤岛问题. PIE SDK支持算法功能的执行,下面对过滤算法功能进行介绍. 2. 算法功能实现说明 ...

  7. oracle 基础知识(八)----Library Cache *

    一,介绍 Library cache是Shared pool的一部分,它几乎是Oracle内存结构中最复杂的一部分,主要存放shared curosr(SQL)和PLSQL对象(function,pr ...

  8. windows 系统 python3.5安装 lxml 库

    有个提示uable find vc***,的错误,如果按照修改python脚本的方法会发现还需要安装VS,安装好了还不一定可以解决问题. 费了半天劲,结合网络上部分信息终于找到了解决方案: 1.打开文 ...

  9. 015-GenericEncodingFilter模板【解决全局乱码】

    package ${enclosing_package}; import java.io.IOException; import java.io.UnsupportedEncodingExceptio ...

  10. 新手 php连接数据库大概。简单过程浅析以及遇到的问题分析

    原文作者:aircraft 原文地址: https://www.cnblogs.com/DOMLX/p/8116845.html 重点:PHP运行在服务器上的请记住!!! 1.在连接数据库与PHP之前 ...