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

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

一：使用浮动

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

CSS代码：

.f {
    width: 100px;
    border: 1px solid #F00;
    float: left;
}

HTML代码：

<div class="wrapper">
    <div class="f">第一个块级元素</div>
    <div class="f">第二个块级元素</div>
</div>

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

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代码：

<div class="wrapper">
    <div class="f">第一个块级元素</div>
    <div class="f">第二个块级元素</div>
    <div class="clear_fix"></div>
</div>

        在结束标签之后加.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代码：

<div class="wrapper">
    <div class="f">第一个块级元素</div>
    <div class="f">第二个块级元素</div>
</div>

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

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

CSS代码：

.wrapper {
    overflow: hidden;
    zoom: 1;
}

.f {
    width: 100px;
    border: 1px solid #F00;
    float: left;
}

HTML代码：

<div class="wrapper">
    <div class="f">第一个块级元素</div>
    <div class="f">第二个块级元素</div>
</div>

 

方法二：内联块元素

1、使用内联块元素

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

CSS代码：

ul li {
    padding: 0px 10px;
    border: 1px solid #F00;
    display: inline-block;
}

HTML代码：

<ul>
    <li>第一个inline-block元素</li>
    <li>第二个inline-block元素</li>
</ul>

这样就能实现横向排列。

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代码：

<ul>
    <li>第一个inline-block元素</li><li>第二个inline-block元素</li>
</ul>

<!--或者：-->

<ul>
    <li>第一个inline-block元素</li><!--
    --><li>第二个inline-block元素</li>
</ul>

<!--或者：-->

<ul>
    <li>第一个inline-block元素
    </li><li>第二个inline-block元素</li>
</ul>

        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代码：

<div class="wrapper">
    <div>第一个flex元素</div>
    <div>第一个flex元素</div>
</div>	

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

 

转载于:https://my.oschina.net/dh20/blog/1800668