CSS布局中的问题解决方式

1、解决搜索框和按钮不对齐的方法

 vertical-align属性只有两个元素设置为display:inline-block才有效

2、盒子莫名的分行现象

问题描述:比如父盒子宽度为960px,两个左右子盒子宽度分别为500px和440px,设置display:inline-block或者float,其中左盒子设置margin-right:20px;按照理想状态下,两个左右子盒子应该在同一行显示,然而实际情况下却分行,右盒子掉入了下一行。

问题分析:造成这个问题的原因是浏览器默认给两个不相连的元素一定的间隔,比如下图,li元素设置为浮动或者display:inline-block,那么它们之间肯定会一定的间隔

解决方法:将两个元素放在同一行,相连,不能由空格,如下图的两个section元素紧挨在一块

原文地址:https://www.cnblogs.com/fengxiongZz/p/6547153.html