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. KVM管理工具webvirtmgr的使用

    WebVirtMgr的日常配置:添加宿主机,创建虚拟机,磁盘扩容,快照等具体操作记录如下: 一.创建虚拟机 1.创建存储池 点击创建的宿主机,进入虚拟机部署界面 点击“存储池”按钮,创建存储池(即创建 ...

  2. 用原生JS&PHP简单的AJAX实例

    功能介绍: 1)file.html 使用 xmlhttp 请求服务器端文件 text ,并更新 file.html 的部分内容 2)update.html 使用 xmlhttp 通过 filewrit ...

  3. You (oracle) are not allowed to use this program (crontab)

      检查一台ORACLE数据库服务器的crontab作业(用户为oracle,实际环境中可能为oracle.也有可能是其它用户)时,发现出现下面提示信息: $ crontab -l You (orac ...

  4. appium server与nodeJs 兼容问题

    在命令行模式下启动appium server时报错:error: uncaughtException: Cannot find module 'internal/util/types' 再来看看app ...

  5. 第10章 DOM

    第10章 DOM 10.1 节点层次 10.1.1 Node 类型 10.1.2 Document 类型 10.1.3 Element 类型 10.1.4 Text 类型 10.1.5 Comment ...

  6. 小白的linux笔记7：批量运行复杂的linux命令组合——BASH简单使用法

    linux的BASH就相当于windows下的BAT文件,可以批处理命令.比如写好一个python脚本后,需要在运行时候加参数,但这个参数又不想每次输入,就可以用BASH的方式写好整条命令,然后直接运 ...

  7. pytest文档32-allure描述用例详细讲解

    前言 pytest+allure是最完美的结合了,关于allure的使用,本篇做一个总结. allure报告可以很多详细的信息描述测试用例,包括epic.feature.story.title.iss ...

  8. 图片中添加箭头【使用PPT实现】

    手头上可以使用的方案 QQ截图 分辨率会改变 画图 网上的教程一般是画一根线再加一个三角来画箭头,有点麻烦,改起来不好改. PS 对我来说,软件安装本身就是个问题, 插入图片,加入箭头,组合,另存为, ...

  9. 浅谈python的第三方库——pandas（三）

    令笔者对pandas印象最为深刻的一件事,就是在pandas中已经内置了很多数据导入导出方法,然而本人并不了解,在一次小项目的工作中曾手写了一个从excel表格导入数据到DataFrame的pytho ...

  10. CVE-2019-1388 Windows UAC提权

    漏洞简述 该漏洞位于Windows的UAC(User Account Control,用户账户控制)机制中.默认情况下,Windows会在一个单独的桌面上显示所有的UAC提示——Secure Desk ...