oracle 横向排列,HTML元素横向排列的方法以及该方法存在问题的解决方案

在CSS中，div、p、header等元素是块级元素，默认占据一整行；两个同一级别的兄弟块级元素，会自动换行显示。如果需要两个兄弟块级元素横向排列显示，需要设置CSS属性。

一：使用浮动

1、使用浮动float，方法如下：

CSS代码：

.f {

width: 100px;

border: 1px solid #F00;

float: left;

}

HTML代码：

第一个块级元素

第二个块级元素

使用浮动效果，就能让两个块级元素横向排列。

2、使用浮动存在的问题

由于float浮动元素不占据正常文档流空间，所以文档普通流中会忽略浮动块的存在。这就导致，如果一个父元素只包含了浮动元素，并且这个父元素没有设置高度、宽度时，就会出现一种“塌陷”现象。

3、解决方法

解决浮动问题有以下方法：

1)、使用clear: both清除浮动

在使用float浮动元素的父元素结束标签前加清除浮动效果。

CSS代码：

.f {

width: 100px;

border: 1px solid #F00;

float: left;

}

.clear_fix {

height: 0;

clear: both;

line-height: 0;

font-size: 0;

}

HTML代码：

第一个块级元素

第二个块级元素

在结束标签之后加.clear_fix也能达到清除浮动效果。

2)、使用::after伪元素清除浮动

该方法原理也是使用clear: both清除浮动，只是不再增加.clear_fix空标签；而是用::after来在元素内部插入元素块，从而达到清除浮动效果。

CSS代码：

.f {

width: 100px;

border: 1px solid #F00;

float: left;

}

.wrapper::after {

content: "";

width: 100%;

height: 0px;

display: block;

clear: both;

}

HTML代码：

第一个块级元素

第二个块级元素

3)、在使用float元素的父元素添加overflow:hidden

使用该样式，可以让父元素检测到浮动元素的高度，从而撑起父元素，父元素有了自己的高度，从而达到清除浮动效果。

CSS代码：

.wrapper {

overflow: hidden;

zoom: 1;

}

.f {

width: 100px;

border: 1px solid #F00;

float: left;

}

HTML代码：

第一个块级元素

第二个块级元素

方法二：内联块元素

1、使用内联块元素

设置了inline-block属性的元素既拥有了块元素可以设置width、height等的特性，又保持了元素不换行的特性。

CSS代码：

ul li {

padding: 0px 10px;

border: 1px solid #F00;

display: inline-block;

}

HTML代码：

• 第一个inline-block元素
• 第二个inline-block元素

这样就能实现横向排列。

2、inline-block元素存在的问题

在字体大小font-size不为0时，元素与元素之间存在间隙。这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的原因就是这个空白符。

3、解决方法

1)、设置父元素>font-size为0，再根据实际需求设置本身元素font-size。

CSS代码：

ul {

font-size: 0px;

}

ul li {

padding: 0px 10px;

font-size: 12px;

border: 1px solid #F00;

display: inline-block;

}

2)、元素与元素不换行

HTML代码：

• 第一个inline-block元素
• 第二个inline-block元素

• 第一个inline-block元素
• 第二个inline-block元素

• 第一个inline-block元素
• 第二个inline-block元素

3)、使用margin负值

CSS代码：

ul li {

margin-right: -6px;

padding: 0px 10px;

border: 1px solid #F00;

display: inline-block;

}

margin的负值与上下文的字体、文字大小、浏览器有关。

4)、使用letter-spacing或者word-spacing

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)

CSS代码：

ul {

letter-spacing: -6px;

}

ul li {

padding: 0px 10px;

border: 1px solid #F00;

display: inline-block;

letter-spacing: 0px;

}

/*或者：*/

ul {

word-spacing: -6px;

}

ul li {

padding: 0px 10px;

border: 1px solid #F00;

display: inline-block;

word-spacing: 0px;

}

方法三：伸缩布局

1、使用flex布局

CSS代码：

.wrapper {

display: -webkit-flex;

display: -moz-flex;

display: flex;

-webkit-flex-flow: row nowrap;

-moz-flex-flow: row nowrap;

flex-flow: row nowrap;

-webkit-align-items: stretch;

-moz-align-items: stretch;

align-items: stretch;

-webkit-justify-content: flex-start;

-moz-justify-content: flex-start;

justify-content: flex-start;

}

.wrapper > * {

width: 200px;

border: 1px solid #F00;

}

HTML代码：

第一个flex元素

第一个flex元素

该方法比较简单，出现的问题也比较少，存在的问题就是：兼容性。不同浏览器之间的兼容性，浏览器不同版本间的兼容性。但是，只要在属性前边添加浏览器内核的私有属性-webkit-、-moz-、-ms-、-o-基本上都能解决问题。