前端开发

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

2021-01-09 17:11:45 阅读数 1464 收藏 0

在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-基本上都能解决问题。