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. word的样式设置

    一般自己写文档就用typora了,便捷美观,但是在工作上又不得不用word写文档,我对审美.格式比较有强迫症,有的小公司没有形成自己的文档规范,或者所谓的规范也只是写好了格式的文档,你往里面填内容就可 ...

  2. MySql 碎片

    查看某个表所占空间,以及碎片大小. select table_name,engine,table_rows,data_length+index_length length,DATA_FREE from ...

  3. Python之逻辑运算符

    这一小节我在动笔之前犹豫到底要不要动手写,虽然简单但是防止遗忘,博主还是决定记录一下.Python中运算符主要分为算术运算符,赋值运算符,比较运算符,逻辑运算符以及成员运算符.下面详细记录这5种运算符 ...

  4. Android配置横屏资源与Activity生命周期

    屏幕旋转会改变设备配置(device configguration).设备设置的特征有:屏幕方向.屏幕像素密度.屏幕尺寸.键盘类型.底座模式以及语言等.    当屏幕发现旋转时(设备配置更改),And ...

  5. LeetCode记录之13——Roman to Integer

    能力有限,这道题采用的就是暴力方法,也只超过了39%的用户.需要注意的就是罗马数字如果IXC的后一位比前一位大的采取的是减的方式. Given a roman numeral, convert it ...

  6. Putty使用帐号和密码的自动登录

    Putty使用ssh key做验证登陆是最方便的,不用密码.如果不想做key exchange,只是单纯想保存帐号密码做自动登陆,可以借助bat文件的方式如下,其中MyServer是已经保存了的ses ...

  7. 异步的模块合并管理器-m3m4版本和jquery版本（原创）

    m3m4版本 (function(w){ var loading={} var models={} function define(name,args){ loading[name]=true mod ...

  8. 使用类和对象、方法、循环、List、泛型来实现简单的图书管理系统

    Book.java import java.util.List; import java.util.Scanner; public class Book { private String name; ...

  9. 什么是SocLib

    一.SocLib简介 SoCLib是用于多处理器片上系统(MP-SoC)虚拟原型开发的开放平台.该项目始于ANR创建的项目, 现在维持在https://www.lip6.fr/.该平台的核心是用于虚拟 ...

  10. ButtonAddListener监听按钮点击事件

    ButtonAddListener监听按钮点击事件 using UnityEngine; using System.Collections; using UnityEngine.UI; using U ...