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运维---1.磁盘相关知识

    一 磁盘物理结构 (1) 盘片:硬盘的盘体由多个盘片叠在一起构成. 在硬盘出厂时,由硬盘生产商完成了低级格式化(物理格式化),作用是将空白的盘片(Platter)划分为一个个同圆心.不同半径的磁道(T ...

  2. C# 小游戏-拼图魔方【Game Puzzle】

    工作闲暇之余去逛了逛CodeProject,刚好现有项目主要用到就是winform,浏览了下照片,找到上周带着蛋挞打疫苗回家的照片,于是新生一记,如何把这些图片玩起来~ 80后应该都有印象,小时候有种 ...

  3. 本地与github建立连接，本地代码上传到github

    1,已有github账号 2,本地已经安装git 3,本地创建ssh-key 在git bash中输入后直接回车. $ ssh-keygen -t rsa -C "your_email@yo ...

  4. 手把手教你搭建 ELK 实时日志分析平台

    本篇文章主要是手把手教你搭建 ELK 实时日志分析平台,那么,ELK 到底是什么呢? ELK 是三个开源项目的首字母缩写,这三个项目分别是:Elasticsearch.Logstash 和 Kiban ...

  5. Python3标准库：functools管理函数的工具

    1. functools管理函数的工具 functools模块提供了一些工具来调整或扩展函数和其他callable对象,从而不必完全重写. 1.1 修饰符 functools模块提供的主要工具就是pa ...

  6. JS笔记之第二天

    一元运算符:++  -- 分为前++和后++ and 前--和后-- 如果++在后面,如:num++ +10参与运算,先参与运算,自身再加1 如果++在前面,如:++num+10参与运算,先自身加1, ...

  7. 使用BeanUtils.populate将map集合封装为bean对象

    1.前言 最近在做一个javaweb项目练练手,涉及到把jsp页面中表单的内容存到数据库,和request.getParameterMap配合使用可以将jsp页面表单的数据转化为bean对象. 2.介 ...

  8. SpringCloud踩坑

    今天在使用 SpringCloud 时遇到了一个问题,感觉有不少小伙伴会遇到,所以记录下来 版本说明 SpringBoot 2.2.4.RELEASE SpringCloud Greenwich.SR ...

  9. UPAD for iCloud

    UPAD for iCloud笔记软件 在笔记软件中创建文件夹橡皮:按两下橡皮就是清除整个屏幕导出笔记到pdf,或者直接导出到其他应用中打开在当前页面中新建一个页面删除某个页面

  10. 如何将文本放置在div的底部显示呢？

    转自:将文本定位于div的底部的方法  摘要: 下文讲述将文本放于div的底部的两种方法,如下所示: 实现思路: 思路1:采用绝对定位的方式,将其放置于div的底部 思路2:使用Line-height ...