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. Exadata 18.1新特性--云平台存储节点升级

    1.传统方式的存储节点升级流程: (1).将存储节点升级包下载到数据库服务器,通常是DB01上. (2).解压缩存储节点升级包. (3).用升级包中的patchmgr工具滚动或非滚动地升级每个存储节点 ...

  2. tornado 10 长轮询和 websocket

    tornado 10 长轮询和 websocket 一.长轮询 #在网页,我们经常扫码登录,那么问题来了,前端是如何知道用户在手机上扫码登录的呢 这里就需要用到长轮询 #长轮询 #客户端能够不断地向服 ...

  3. DP小小结

    入门题 : [Luogu1441]砝码称重 , [NOIP2015]子串 [AHOI2009]中国象棋 , 详见代码 [HNOI2007]梦幻岛宝珠 , 详见代码 [NOIP2012]开车旅行 , 没 ...

  4. HDU_1846 Brave Game 【巴什博弈】

    题目: 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻. 今天, ...

  5. UESTC - 618

    #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+11; const int N = 1e6; typed ...

  6. C++ GUI Qt4编程(04)-2.1findDialog

    finddialog.h /* * 未实现findNextSignal和findPreviousSignal */ #ifndef FINDDIALOG_H #define FINDDIALOG_H ...

  7. PIE SDK克里金插值法

    1.算法功能简介 克里金插值法基于一般最小二乘法的随机插值技术没用方差图作为权重函数,被应用于任何点数据估计其在地表上分布的现象,被称为空间自协方差最佳插值法,是一种最优内插法也是一种最常用的空间插值 ...

  8. python 爬虫系列07-天气爬虫

    看天气 import requests from bs4 import BeautifulSoup ALL_DATA = [] def parse_page(url): headers = { 'Us ...

  9. (转)IPC相关的命令

    IPC相关的命令 原文:http://www.cnblogs.com/jjzd/p/6773090.html 进程间通信概述 进程间通信有如下的目的: 1.数据传输,一个进程需要将它的数据发送给另一个 ...

  10. 案例45-crm练习改写客户列表使用struts2&OGNL

    1 修改CustomerAction代码 2 修改jsp/customer/list.jsp代码 <%@ page language="java" contentType=& ...