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. MySQL热机双备之双主同步复制配置

    此配置方案来源于csdn前辈博客,奈何找不到出处了,抱拳!!! 1.  MySQL同步机制概述 MySQL支持单向.异步复制,复制过程中一台服务器充当主服务器,一台或多台服务器充当从服务器,双主同步要 ...

  2. NCE L4

    课文内容 重点单词详解 课文内容详解

  3. Zookeeper分布式协调即分布式锁机制

    主要用到的Zookeeper机制: 临时+有序节点,节点watch机制 过程: 发生分布式锁竞争时,参与竞争的各个客户端服务都到Zookeeper的同一父节点(代表着同一把锁)下建立自己的临时+有序子 ...

  4. DEVIL MAY CRY V：《鬼泣5》

    “又是一个带孝子的故事”

  5. 《自拍教程19》aapt_apk信息查看工具

    aapt命令行工具介绍 aapt.exe(Linux/Ubuntu/imac操作系统下是未带后缀的aapt), 是android sdk自带的用于打包apk,解析apk的命令行工具软件. aapt.e ...

  6. Node中使用MongoDB

    简介 MongoDB 中文文档 MongoDB是一个介于关系数据库和非关系数据库(nosql)之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. Mongoose 在Node中可以使用 Mo ...

  7. vue使用JSEncrypt实现rsa加密及挂载方法

    挂载全局方法 使用jsencrypt进行rsa加密 原文链接:Js参数RSA加密传输,jsencrypt.js的使用 - CSDN博客* https://blog.csdn.net/p31201115 ...

  8. 在香蕉派的树莓派系统上配置 Syncthing 自启动

    在香蕉派的树莓派系统上配置 Syncthing 自启动 —— 魏刘宏 2020 年 1 月 19 日 首先做个名词解释,” 香蕉派” 是国内一款山寨树莓派的硬件产品,” 树莓派系统” 指的是”rasp ...

  9. 解决Python3下map函数的显示问题

    今天小编就为大家分享一篇解决Python3下map函数的显示问题,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧map函数是Python里面比较重要的函数,设计灵感来自于函数式编程.P ...

  10. linux之定时任务调度

    crond:任务调度 任务调度:是指系统在某个时间执行特定的程序或命令 任务调度分类: (1)系统工作,有些重要的工作必须周而复始地进行,如病毒扫描等 (2)个别用户工作:个别用户可能希望执行某些程序 ...