当前位置: 首页 > news >正文

元素分类--内联元素(特点:同行, 宽高边距不可改)

在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。

如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行内元素标签</title>
<style type="text/css">
a, span, em, div {
    background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
div {
    font-size:10px;
    display:inline;
}
</style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.rinpe.com">Rinpe</a>
    <span>33333</span>
    <span>44444</span><em>555555</em>
    <div>我是div, 我变成内联元素了</div>
</body>
</html>

效果:

相关文章:

  • 开源中国maven库镜像
  • Linux/CentOS 升级C基本运行库CLIBC的注意事项(当想解决GLIBC_2.x找不到的编译问题)...
  • memset()实现及细节
  • 小笨蛋网咖 QQ技术 网络技术 网站源码免费资源 免费素材 免费下载平台www.xiaobdwk.com...
  • AngularJS之代码风格36条建议【一】(九)
  • matlab基本粒子群算法实现(一)
  • Spark(八):Spark SQL 之 Data Sources And Save Modes
  • java命令执行jar包的方式
  • JAVA_NIO系列——Channel和Buffer详解
  • Microsoft.Web.Redis.RedisSessionStateProvider
  • 【ZZ】如何选择适合自己项目的编程语言
  • 使用css3属性处理单词的换行和断词
  • Linux中文显示设置
  • Spark RDD API详解(一) Map和Reduce
  • 【HTML5】Server-Sent服务器发送事件
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • [译]Python中的类属性与实例属性的区别
  • 【comparator, comparable】小总结
  • 2019年如何成为全栈工程师?
  • 30秒的PHP代码片段(1)数组 - Array
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • css属性的继承、初识值、计算值、当前值、应用值
  • docker-consul
  • es6--symbol
  • Promise面试题2实现异步串行执行
  • Python语法速览与机器学习开发环境搭建
  • 构造函数(constructor)与原型链(prototype)关系
  • 记录一下第一次使用npm
  • 简单易用的leetcode开发测试工具(npm)
  • 解析带emoji和链接的聊天系统消息
  • 理清楚Vue的结构
  • 前端工程化(Gulp、Webpack)-webpack
  • 为视图添加丝滑的水波纹
  • #ubuntu# #git# repository git config --global --add safe.directory
  • (C语言版)链表(三)——实现双向链表创建、删除、插入、释放内存等简单操作...
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • (分享)自己整理的一些简单awk实用语句
  • (附源码)ssm户外用品商城 毕业设计 112346
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (三)Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • (转)winform之ListView
  • (转)可以带来幸福的一本书
  • .bat批处理(七):PC端从手机内复制文件到本地
  • .NET 使用配置文件
  • .Net接口调试与案例
  • /etc/sudoer文件配置简析
  • /var/spool/postfix/maildrop 下有大量文件
  • @SuppressWarnings注解
  • [ IO.File ] FileSystemWatcher
  • [ vulhub漏洞复现篇 ] Jetty WEB-INF 文件读取复现CVE-2021-34429
  • [ 数据结构 - C++]红黑树RBTree
  • [ajaxupload] - 上传文件同时附件参数值
  • [BZOJ4554][TJOI2016HEOI2016]游戏(匈牙利)
  • [echarts] y轴不显示0