文档章节

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

起个ID真难
 起个ID真难
发布于 2018/04/24 23:13
字数 1197
阅读 223
收藏 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-基本上都能解决问题。

 

起个ID真难
粉丝 0
博文 3
码字总数 2697
作品 0
网页/平面设计
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.7K
8
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
6.2K
18
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
720
1
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

如何查找Linux中所有777权限的文件?

正确的设置文件权限是Linux系统管理中最关键的部分。一个权限为777的文件对每个人都是开放的,可以读和写。任何登录到系统的用户都可以对这个文件进行写入。这对您的服务器系统是具有很大的安...

osc_3grma05a
18分钟前
16
0
信越KBM-403--高质量复合材料

     信越KBM-403硅烷偶联剂是由有机物以及硅构成的化合物。硅烷偶联剂的分子中,具有能够与无机材料进行化学性结合的,和能够与有机材料进行化学性结合的两种以上的不同的反应基团。  ...

feiyoufei
18分钟前
9
0
Spring定时任务 2步轻松搞定

这短时间工作需求中涉及到Spring定时任务,今天来整理一下 Spring定时任务其实很简单,只需要两步,就好像把大象放进冰箱需要两步一样 1,打开冰箱门 2,把大象放进去 同理Spring两步编码实现定时...

lixingsikao
18分钟前
78
0
nginx启用域名访问,禁止ip直接访问

最近为公司客户搭建一套ToB的平台,该平台的部署机器在客户那边(无法直接登录,需要通过***访问)。为了方便从外部直接访问平台的web页面,我通过frps工具反向代理到我一台公有云机器,这样...

osc_qvtw8r10
19分钟前
0
0
快速搭建一台私有化KMS激活服务器

KMS是批量激活服务器(Key Management Server)的英文缩写,从Windows Vista开始,Microsoft使用多次激活密钥(MAK, Multiple Activation Keys)和密钥管理服务器(KMS, Key Management Ser...

osc_wfhwwd4t
20分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部