让块元素在同一行显示的方法： float 和inline-block

float:

定义：按照一个指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来（不完全脱离文档流）

值： left、right、none

特点：

1、浮动的块元素可以在一行显示，宽度是被内容撑开的
2、浮动的行内元素支持宽高
3、非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
4、浮动的子元素不会撑开其父元素的高度，所以换行、空格也不会影响父元素（要撑开父元素的话需要在父元素最后增加一个清楚左右浮动的子元素clear: both; after伪类清除浮动）

.clearfix:after{content: '';display: block;clear: both;}

inline、inline-block:
把换行代码解析成一个空格

display:inline-block; 行内块元素
特征：
1、行内块元素支持宽高
2、行内块元素可以在一行显示
3、不给宽高的话，宽度会由内容撑开
4、代码换行会被解析成一个空格
5、IE6、7不支持块元素的inline-block

6、行内块元素没有脱离文档流，所以能撑开父元素

IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block

inline-block与float的区别：

如果高度不一至的情况下，想让他们按顺序排列就可以选择inline-block

转载于:https://www.cnblogs.com/pengc/p/8872419.html

让块元素在同一行显示的方法： float 和inline-block相关推荐

行内元素，块级元素div在一行显示
行内元素,块级元素div在一行显示行内元素无法设置padding-top,padding-bottom,margin-top,margin-bottom,width,height:除非将行内元素改为 ...
html一行显示四个图片,css一行显示之：实现多个图片一行显示的方法
在前面的几篇文章当中,我们一起学习了在css中怎么让文字在一行显示以及文字在一行显示时超出部分自动隐藏,今天我们来一起学习一下在css中如何让多张图片在一行显示,以帮助我们在网页制作中更加的随心所欲. ...
html行内块元素对齐,如何通过显示行内块将元素对齐到右侧？
你不是能浮它们,因为白色的空间.如果您使用的是display: inline;或display: inline-block;,则可以使用空格. 如果你想与display: inline-block;达 ...
div内元素不在一行的问题解决方法
让div内两个元素直接浮动向同一方向即可,然后设置一下两个元素的间距,即可解决该问题代码如下: <div><input id="lxmc" type=" ...
HTML块级元素/块标签/块元素
文章目录块元素的特点块元素清单 block level element. 块级元素想在同一行显示需浮动或者 display:inline. 块元素的特点每个块级元素都是独自占一行,其后的元素也只 ...
CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式元素一般分为块级元素和行内元素元素种类排列设置样式默认包含块元素独占一行可以设置宽高容器的100% 可以包含任何标签行内元素一行可以放多个行内样式不可直接设置宽 ...
CSS--块元素和行内元素及行内块元素（外加转换方式）
元素类型根据css显示分类HTML元素被分为两种类型:块元素,内联元素块元素-- block 块状元素(block element) 常见的块级元素有:<div>,<h1> ...
HTML元素分类：行内元素，块级元素，行内块元素；及其各自的特点
目录块级元素行内元素(内联元素) 行内块元素(内联块级元素) 一.块级元素(block) 定义:默认情况下,独占一行的元素就是块级元素. 特点: 每个块级元素独占一 ...
CSS设置块元素和行内元素
CSS-设置块元素和行内元素什么是行元素什么是块元素一:块元素块元素单独占据一行,并且排斥和其他元素在同一行,在浏览器中,块元素出现的形状是矩形,并且盛放其他元素. 块元素 : 列表表格 di ...
html内联元素和块元素的特性,HTML中块级元素和内联元素的特性详解
原标题:HTML中块级元素和内联元素的特性详解在网站布局中经常会遇到元素进行居中的时候,设置了text-align:center:margin:0 auto;有时候会起作用,但有时候对居中无效,刚接 ...

让块元素在同一行显示的方法： float 和inline-block

让块元素在同一行显示的方法： float 和inline-block相关推荐

最新文章

热门文章