display:block/inline/inline-block/inline-table/list-item区别

最新推荐文章于 2024-01-03 07:15:00 发布
最新推荐文章于 2024-01-03 07:15:00 发布
阅读量6.1k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： css技术文档 文章标签： displayblockinlinein
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lanben183/article/details/21700461
本文详细解析了display:inline-block与inline-table在网页布局中的使用场景和区别，包括它们如何影响元素的显示方式以及跨浏览器兼容性问题。重点介绍了display:inline-block在实现元素自定义宽高的灵活性，以及inline-table在特定布局需求下的局限性和解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

大家都知道 display:block是显示成块状，独占一行；

而inline是行内的意思，会根据里面的内容大小而改变；

那display:inline-block实际就是inline可以定义宽高，

但是重点是我试了一下，ie6、7不支持这个样式。


inline-table一般很少用到（ie6、7不支持这个样式），表格属于block类型，独占一行，如果想要文字跟它一行显示，就要把表格设置成inline-table，这时会发现，safari及chrome垂直对齐方式为底部对齐，火狐和ie及Opera是顶部对齐，我们可以通过vertical-align去修改对齐方式。


list-item将多个元素作为列表来显示，同时在元素的开头加上列表的标记。

html inline-table,实战笔记二（display：inline-table）
weixin_35540825的博客
06-15 2915
一、inline-tableinline-table的盒子inline-table得到的是，外面是“内联盒子”，里面是“table盒子”。得到的是一个可以和文字在一行中显示的表格。Document.inline-table {display: inline-table; //width: 128px;margin-left: 10px;border: 1px solid #cad5eb;}.i...
CSS的display的多种布局方式总结(inline-block,table,flex)
Yueqin0512的博客
11-03 9480
1.display:inline-block布局 常见块级元素 常见行内元素 一：display的几个常用的属性值 inline（行内元素） 1.使元素变成行内元素，可以与其他行内元素共享一行，不会独占一行 2.不能更改元素的height，width的值，大小由内容撑开 3.可以使用padding,margin上下左右都有效 block（块级元素） 1.使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度 2.能够改变元素的height，width的值 3.可以设
list-item:生成单个格式的列表项，使您可以轻松生成带有适当缩进，项目符号，数字或其他前导字符的列表
05-08
项目清单 生成单个格式的列表项，使您可以轻松生成带有适当缩进，项目符号，数字或其他前导字符的列表。 请考虑关注该项目的作者 ，并考虑为该项目以显示您的 :red_heart: 和支持。 安装 使用安装： $ npm install --save list-item 用法 const listitem = require ( 'list-item' ) ; 例子 基本清单 使用默认项目符号和缩进生成列表： const listitem = require ( 'list-item' ) ; const li = listitem ( ) ; let list = [ 'a' , 'b' , 'c' , 'd' , 'e' ] . map ( ( ele , i ) => li ( i , ele ) ) ; console . log ( list . join ( '\n' ) ) ; 结果是：
display: inline-table;在火狐、Opera上显示不正常，在IE、Chrome中显示正常
Evilloafer的博客
04-24 2426
最近遇到的一个问题，display: inline-table在火狐、Opera中显示效果错乱，变成了table-row的效果。 想要效果： 实际效果： 解决方案 把display的属性赋为空 display:’’ 即可解决 display=""; 就是采用默认值 语法： display : block | none | inline | compact | marker | inline...
List item
测试0901-1
09-21 1273
List item c List item List item <div class="element"> <div class="etitle">商户订单号:</div> <div class=&
display属性理解： inline ， block， inline-block+BFC格式上下文、盒模型
hhhh
04-28 700
display的常用的属性值，inline ， block， inline-block 块级元素 总是从新行开始 width、height、margin、padding都可以控制 宽度默认是页面的100% 可以容纳内联元素和其他块元素 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <di
css Table布局-display:table
qq_35396397的博客
11-22 911
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:fo="http://www.w3.org/1999/XSL/Format" exclude-result-prefixes="w r"> <xsl:output method="xml" indent="yes"/> <!-- 根模板 --> <xsl:template match="/"> <fo:root> <fo:layout-master-set> <fo:simple-page-master master-name="A4" page-width="210mm" page-height="297mm" margin-top="1cm" margin-bottom="1cm" margin-left="2cm" margin-right="2cm"> <fo:region-body margin-top="1cm" margin-bottom="1cm"/> <fo:region-before extent="1cm"/> <fo:region-after extent="1cm"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="A4"> <fo:flow flow-name="xsl-region-body" font-family="SimSun, 宋体" language="zh-CN" line-height="1.5"> <xsl:apply-templates select="//w:body"/> </fo:flow> </fo:page-sequence> </fo:root> </xsl:template> <!-- 正文处理 --> <xsl:template match="w:body"> <xsl:apply-templates select="*"/> </xsl:template> <!-- 段落处理 --> <xsl:template match="w:p"> <fo:block font-size="12pt" space-after="12pt" linefeed-treatment="preserve" wrap-option="wrap" text-align="justify"> <xsl:apply-templates select="w:r"/> </fo:block> </xsl:template> <!-- 文本运行处理 --> <xsl:template match="w:r"> <fo:inline font-family="SimSun, 宋体, Microsoft YaHei, sans-serif"> <!-- 处理粗体时使用黑体 --> <xsl:if test="w:rPr/w:b"> <xsl:attribute name="font-family">SimHei, 黑体</xsl:attribute> <xsl:attribute name="font-weight">bold</xsl:attribute> </xsl:if> <!-- 处理斜体时使用楷体 --> <xsl:if test="w:rPr/w:i"> <xsl:attribute name="font-family">KaiTi, 楷体</xsl:attribute> <xsl:attribute name="font-style">italic</xsl:attribute> </xsl:if> <xsl:value-of select="w:t"/> </fo:inline> </xsl:template> <!-- 表格处理 --> <xsl:template match="w:tbl"> <fo:table table-layout="fixed" width="100%"> <xsl:for-each select="w:tblGrid/w:gridCol"> <fo:table-column column-width="{@w:w}dxa"/> </xsl:for-each> <fo:table-body> <xsl:apply-templates select="w:tr"/> </fo:table-body> </fo:table> </xsl:template> <!-- 表格行 --> <xsl:template match="w:tr"> <fo:table-row> <xsl:apply-templates select="w:tc"/> </fo:table-row> </xsl:template> <!-- 单元格 --> <xsl:template match="w:tc"> <fo:table-cell border="1pt solid black" padding="2pt"> <fo:block> <xsl:apply-templates select=".//w:p"/> </fo:block> </fo:table-cell> </xsl:template> <!-- 列表处理 --> <xsl:template match="w:numPr"> <fo:list-block> <xsl:apply-templates select="w:numId"/> </fo:list-block> </xsl:template> </xsl:stylesheet>使用上述样式表转出来的xsl-fo模板表格样式消失了
03-08
display-align="center"> <!-- 新增垂直居中 --> <fo:block> <xsl:apply-templates select=".//w:p"/> </fo:block> </fo:table-cell> </xsl:template> ``` 三、补充优化建议 1. 动态边框检测（处理Word中的...
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:fo="http://www.w3.org/1999/XSL/Format" exclude-result-prefixes="w r"> <xsl:output method="xml" indent="yes"/> <!-- 根模板 --> <xsl:template match="/"> <fo:root> <fo:layout-master-set> <fo:simple-page-master master-name="A4" page-width="210mm" page-height="297mm" margin-top="1cm" margin-bottom="1cm" margin-left="2cm" margin-right="2cm"> <fo:region-body margin-top="1cm" margin-bottom="1cm"/> <fo:region-before extent="1cm"/> <fo:region-after extent="1cm"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="A4"> <fo:flow flow-name="xsl-region-body" font-family="SimSun, 宋体" language="zh-CN" line-height="1.5"> <xsl:apply-templates select="//w:body"/> </fo:flow> </fo:page-sequence> </fo:root> </xsl:template> <!-- 正文处理 --> <xsl:template match="w:body"> <xsl:apply-templates select="*"/> </xsl:template> <!-- 段落处理 --> <xsl:template match="w:p"> <fo:block font-size="12pt" space-after="12pt" linefeed-treatment="preserve" wrap-option="wrap" text-align="justify"> <xsl:apply-templates select="w:r"/> </fo:block> </xsl:template> <!-- 文本运行处理 --> <xsl:template match="w:r"> <fo:inline font-family="SimSun, 宋体, Microsoft YaHei, sans-serif"> <!-- 处理粗体时使用黑体 --> <xsl:if test="w:rPr/w:b"> <xsl:attribute name="font-family">SimHei, 黑体</xsl:attribute> <xsl:attribute name="font-weight">bold</xsl:attribute> </xsl:if> <!-- 处理斜体时使用楷体 --> <xsl:if test="w:rPr/w:i"> <xsl:attribute name="font-family">KaiTi, 楷体</xsl:attribute> <xsl:attribute name="font-style">italic</xsl:attribute> </xsl:if> <xsl:value-of select="w:t"/> </fo:inline> </xsl:template> <!-- 表格处理 --> <xsl:template match="w:tbl"> <fo:table table-layout="fixed" width="100%" border-collapse="collapse"> <!-- 新增边框合并属性 --> <xsl:for-each select="w:tblGrid/w:gridCol"> <!-- 修正单位转换 --> <fo:table-column column-width="{@w:w div 20}pt"/> </xsl:for-each> <fo:table-body> <xsl:apply-templates select="w:tr"/> </fo:table-body> </fo:table> </xsl:template> <!-- 表格行 --> <xsl:template match="w:tr"> <fo:table-row> <xsl:apply-templates select="w:tc"/> </fo:table-row> </xsl:template> <!-- 单元格模板增强 --> <xsl:template match="w:tc"> <fo:table-cell border="1pt solid black" padding="2pt" display-align="center"> <!-- 新增垂直居中 --> <fo:block> <xsl:apply-templates select=".//w:p"/> </fo:block> </fo:table-cell> </xsl:template> <!-- 列表处理 --> <xsl:template match="w:numPr"> <fo:list-block> <xsl:apply-templates select="w:numId"/> </fo:list-block> </xsl:template> </xsl:stylesheet>这是我改完的xslt样式表，出现了一些不该有的换行，我应该怎么修改
最新发布
03-08
但XSLT的模板匹配可能会在处理多个w:r节点时，每个都生成一个fo:inline，而连续的fo:inline元素之间如果有空格或换行，可能会被XSL-FO处理器解释为空格，导致不必要的换行。需要检查源文档中的w:r元素是否被正确地...
display 、float 、position的关系 display作用是什么?display:inline-block会不会显示间隙？行内元素float:left后是否变为块级元素？flex 布局
星辰迷上大海的博客
01-03 2301
使用Flex布局可以轻松实现响应式设计、等高布局、对齐等复杂的布局需求，比传统布局方式更加灵活方便。
display:list-item
热门推荐
I79265的博客
06-11 2万+
display:list-itemdisplay:list-item为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点，而display:block则不会出现黑点。display:block/inline/inline-block/inline-table/list-item区别大家都知道 display:block是...
display:list-item，不需要有ul,ol,li等列表标签也能排布列表格局
weixin_33816821的博客
07-10 704
给一个元素两个属性，就能让这些元素按照列表排列。这两个属性是：1、display:list-item2、list-style-type:decimal(属性值很多种类)； 转载于:https://blog.51cto.com/lflianglan/1244348...
CSS学习笔记：inline和inline-block的区别
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
07-28 5572
display:inline 该元素生成一个或多个行内框 display:inline-block 该元素生成一个块级别框，但是整个框的行为就像是一个内联元素。 inline 和 inline-box的区别在于： margin与padding inline元素只能设定左右margin、padding，上下的是不起作用的 inline-block的上下左右都可以设定margin和padding wi
inline-list
dddd
12-24 149
[code="java"] A bit of text before the list appears. Perhaps the context is something about a husband getting a call from his wife to pick up a few things on the way home fro...
深入理解inline元素，block-level元素和display属性
jujuwuju的专栏
07-23 1151
行内元素和块级元素有什么异同？ 可能你觉得这是一个老掉牙的问题，但其实并没有那么简单。 对于初学者来说，当遇到面试官问到这个问题的时候，脑海里的第一印象是css的display属性，值为inline时为行内元素，值为block时为块级元素，那值为inline-block时呢，元素是块级行内元素吗？ 其实我们看问题的角度从一开始就错了，错误地站在了css的角度，而真正正确的是站在html的角度。因为这里的元素，本质上是指html的DOM元素。 下面我们就3个原理展开深入： 深入理解inline元.
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1307
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
display的32种写法
lanwuying的专栏
09-26 5893
转自：display的32种写法 你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们一一道来，让你一次性完全掌握display，从此再也不用对它发愁。 从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是7大类 1. 外部值 所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。 1.1 dis...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值