CSS的display显示

1. 行内元素和块级元素关系

块级元素：1、标题标签：h1~h6；2、段落标签：p1~p6；3、div；4、列表；等

行内元素：1、span；2、a；3、img；4、strong；等

二者关系：

行内元素可以包含在块级元素中；

块级元素不可以包含在行内元素中；

因此，导致一个问题：当想把块级元素放在一行时，会有问题。因此，出现了解决方案：display

2. 把块级元素放在一行

CSS语法格式：标签名 {display:inline;}

举例：列表是块元素，将其放在一行

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
​
<p>链接列表水平显示：</p>
​
<ul>
    <li><a href="https://www.baidu.com/" target="_blank">HTML</a></li>
    <li><a href="https://www.baidu.com/" target="_blank">CSS</a></li>
    <li><a href="https://www.baidu.com/" target="_blank">JavaScript</a></li>
    <li><a href="https://www.baidu.com/" target="_blank">XML</a></li>
</ul>
​
</body>
</html>

CSS代码如下：

li {
    display: inline;
}

效果：

CSS的display显示的更多相关文章

  1. [转]CSS Display(显示) 与 Visibility（可见性）

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  2. CSS：CSS Display(显示) 与 Visibility（可见性）

    ylbtech-CSS:CSS Display(显示) 与 Visibility(可见性) 1.返回顶部 1. CSS Display(显示) 与 Visibility(可见性) display属性设 ...

  3. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  4. CSS实时编辑显示

    方法 CSS实时编辑显示:通过display:block让css文本显示出来,再加上contentEditable使文本可编辑 <!DOCTYPE html> <html> & ...

  5. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  6. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. css之display:inline-block布局

    css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...

  8. !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  9. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

随机推荐

  1. 【渗透实战】web渗透实战，手动拿学校站点 得到上万人的信息（漏洞已提交）

    ------------恢复内容开始------------ ’‘’版权tanee转发交流学校请备注漏洞已经提交学校管理员关键过程的截图和脚本代码已经略去.希望大家学习技术和思路就好,切勿进行违法犯罪 ...

  2. [dubbo 源码之 ]1. 服务提供方如何发布服务

    服务发布 启动流程 1.ServiceConfig#export 服务提供方在启动部署时,dubbo会调用ServiceConfig#export来激活服务发布流程,如下所示: Java API: ` ...

  3. 「Flink」Flink中的时间类型

    Flink中的时间类型和窗口是非常重要概念,是学习Flink必须要掌握的两个知识点. Flink中的时间类型 时间类型介绍 Flink流式处理中支持不同类型的时间.分为以下几种: 处理时间 Flink ...

  4. yum 程序包管理简介

    rpm可以实现程序的快速,简单安装(跟编译安装比),但是rpm自己不能解决依赖,所以很多工具为了自动解决依赖应运而生,其中yum就是其中之一. yum解决依赖的办法: 必须有个文件服务器,里面放置所以 ...

  5. 数据分析----天气预报走向（pygal）

    #!usr/bin/env python #-*- coding:utf-8 _*- """ @author:Administrator @file: 可视化天气预报.p ...

  6. matlab中的输出显示函数

    matlab中的输出显示函数 在matlab中使用的显示函数有disp.sprintf.fprintf比较常用.下面来介绍一下他们的用法. 1.disp()函数: disp(x)主要是用来输出变量x的 ...

  7. Python 实现选择排序

    选择排序算法步骤: 找到数组中最小的那个元素中, 将它和数组的第一个元素交换位置, 在剩下的元素中找到最小的元素,将它和数组的第二个元素交换位置, 如此往复,知道将整个数组排序. 逐步分析: 假设一个 ...

  8. P3853 [TJOI2007]路标设置(二分答案）

    -------------------------------- 二分答案的典型题 --------------------------------- 注意一下check和输出就行 --------- ...

  9. cf1214E

    题意简述:构造一棵包含2*n个节点的树,要求2*i 和 2*i-1之间的距离等于d[i]<=n 1<=i<=n 给出N和d数组,输入对应的边 题解:对d数组按照从大到小排序,然后首先 ...

  10. XGBoost学习笔记1

    XGBoost XGBoost这个网红大杀器,似乎很好用,完事儿还是自己推导一遍吧,datacamp上面有辅助的课程,但是不太涉及原理 它究竟有多好用呢?我还没用过,先搞清楚原理,hahaha~ 参考 ...