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. 远程连接Linux下mysql报10061

    最近接到一个新活,四台Linux服务器配置MySQL热机双备+IP隧道LVS集群服务,尽管好想使个眼神杀死老大,但特么心里是感激的.不多说一口气装了n个Ubuntu-server. 每次在虚拟机装完M ...

  2. android应用开发错误：Your project contains error(s),please fix them before running your

    重新打开ECLIPSE运行android项目,或者一段时间为运行ECLIPSE,打开后,发现新建项目都有红叉,以前的项目重新编译也有这问题,上网搜索按下面操作解决了问题 工程上有红叉,不知道少了什么, ...

  3. ID生成器之——别人家的方案and自家的方案

    “叮咚,叮咚……”,微信提示音一声接一声,声音是那么的频繁,有妖气,待俺去看一看. 这天刚吃完午饭,打开微信,发现我们的技术讨论组里有 100 多条未读消息,心想,是不是系统出问题了?怎么消息那么频繁 ...

  4. itest(爱测试) 4.5.0 发布，开源BUG 跟踪管理 & 敏捷测试管理软件

    itest 简介 test 开源敏捷测试管理,testOps 践行者.可按测试包分配测试用例执行,也可建测试迭代(含任务,测试包,BUG)来组织测试工作,也有测试环境管理,还有很常用的测试度量:对于发 ...

  5. 吴裕雄--天生自然轻量级JAVA EE企业应用开发Struts2Sping4Hibernate整合开发学习笔记：Spring_autowire

    <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www. ...

  6. Java垃圾回收手册翻译 - 什么是垃圾回收

    Java垃圾回收手册翻译 - 什么是垃圾回收 初看之下,垃圾回收应该要做其名称之事 - 找到和丢掉垃圾.然而事实上它正好做着相反的事,垃圾回收会记录所有仍在使用中的对象,然后将其他标记为垃圾.谨记这点 ...

  7. 金融计算的开源库——QuantLib 学习入门

    本文在Creative Commons协议下发布. 简介 瞬息万变的金融市场开发出了太多的金融产品,产生了太多的计算问题,这对于 Fintech 来讲:无论是计算能力上的,还是软件设计上的是一个巨大的 ...

  8. lucas定理 模板

    lucas定理 (nm)&VeryThinSpace;mod&VeryThinSpace;p=(⌊np⌋⌊mp⌋)(n&VeryThinSpace;mod&VeryTh ...

  9. 第二章.学习halcon的准备工作

    *图片读取 read_image (Test1, 'C:/Users/Administrator/Desktop/new/Test1.jpg') *文件夹读取 list_files ('C:/User ...

  10. python-flask模块注入(SSTI)

    前言: 第一次遇到python模块注入是做ctf的时候,当时并没有搞懂原理所在,看了网上的资料,这里做一个笔记. flask基础: 先看一段python代码: from flask import fl ...