inline-block不一样的用处

最新推荐文章于 2021-11-03 18:13:29 发布
最新推荐文章于 2021-11-03 18:13:29 发布
阅读量309 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： 浏览器 商城 ie 招聘 终端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Do_it__/article/details/6336085
本文探讨了在不同操作系统和浏览器环境下，使用inline-block布局处理多个链接换行显示的问题。面对字体宽度不确定、浏览器显示差异等挑战，作者通过京东商城底部链接的实际案例，展示了如何有效地解决这些问题。

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

今天遇到一个问题，说的就是很多个链接，类是友情链接的东西，一并都在一块。然后要让他们换行输出，但是有几个不兼容的问题：

一是，不同操作系统所采用的字体不同时，每个字体对应的宽度就不确定，然后它到底会不会溢出是未知的。

二是，每种浏览器的显示是有差别的，字体这个东西很难去精确定宽的，除非采用em设定宽度（但是对于中栏固定宽度来说，几乎没有人会去采用em设定宽度的）。

三是，像有些网站一样，他们用<br />去换行输出，当然这种做法本身没错，但是当下回再添加一个链接时就需要每个浏览器都去看一遍，是不是溢出了，或者布局错乱了？

所以可以考虑使用inline-block去做。

这里我采用了京东商城的最底部链接：

关于我们| 联系我们| 人才招聘| 商家入驻| 广告服务| 移动终端| 友情链接| 销售联盟

其实IE对于字体的处理是其他浏览器所不能匹及的。这里我仅仅只是使用的display:inline-block并没有使用兼容ie6，7的方式（*display:inline;*zoom:1）

css布局方式总结
duansamve的博客
05-14 961
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.不能更改元素的height，width的值，大小由内容撑开.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
前端面经-CSS篇(五）---布局（1）正常布局（Normal Flow）、display属性、flex布局
qq_44643806的博客
04-07 1094
正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示出现在另一个元素下面的元素被描述为元素，出现在另一个元素旁边被描述为二、display属性display决定了元素在布局流中的，比如它是像段落、块级容器那样独占一行，还是像文字一样内联排布，或者干脆不显示。：一个块级元素会在其前后自动生成换行（与其兄弟块分行），默认情况下它不会与其他元素并排；：能够设置widthheightmarginpadding。
CSS inline-block的作用
qq_45512210的博客
08-15 336
block块级元素中的元素自动填满父级元素占据一行，可以设置宽高，margin和padding。 inline行内元素不会换行，宽高设置无效，对于边距，top和bottom边距设置不会产生相应的效果。 inline-block设置后，可以让一个块级元素拥有行内的一行展示和该元素本身的宽高属性。 ...
display : block display :inline display: inline-block 的作用
a520songhai的博客
06-17 420
display: block display是控件的css属性之一，表示的是显示模式。none表示不显示在网页上，但是代码存在；bolck是此元素将显示为块级元素，此元素前后会带有换行符。 在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，...
block、inline和inline-block的功能
无辜的胡萝卜的博客
07-04 247
block 将display设置为block可以将行内元素变为块元素，这也意味着可以将比如a、span等元素按照需要，设置width、margin等属性，当然，最直观的是元素换行了。 inline 与block相反，inline可以将元素变为行内元素，比如我们需要一个横向的导航栏，只需要将无序列表的display设置为inline，就可以很轻松的达到预期效果，同时还不会影响相邻元素框的布局。
inline-block详解
qq_35340281的博客
12-16 1万+
一、首先要了解什么是块级元素和行级元素 块级元素：会占领页面一行，其后多个block元素会自动换行、可以设置width、height属性，设置width后同样占领一行，同样也可以设置padding和margin属性。（常见的块级元素有div、img、ul、form、p等）。 行级元素：与其它元素在同一行上的元素称为行级元素。高度、行高、及底边距不可改变。（常见有em、strong、br、inp...
inline-block的一些理解
qq_25302061的博客
09-20 606
block：元素独占一行（默认填满父元素），可以设置宽度和高度（但还是会独占一行）； inline：多个元素占一行（直至排不下换行），设置宽度高度无效； inline-block：，此处input经过bootstrap修饰变为block类型元素，转换成inline-block后line-height才起作用。（自身实验得来，理解可能有偏差，欢迎不吝赐教！）   另：float常会影响布局，...
display inline怎么用
11-09
本篇文章将详细介绍如何利用`display inline`这一特性来改变元素的显示方式，使原本占据整行的块级元素（如`<div>`）能够像文本一样在同一行内显示。 #### 一、`display inline`的基本概念 1. **基本定义**：在...
前端知识之css
prigilm的博客
11-03 446
CSS 文章目录CSS一、CSS介绍二、CSS语法1、注释2、CSS样式组成三、CSS三种引入方式四、CSS选择器1、基本选择器2、组合选择器3、属性选择器4、分组和嵌套5. 伪类选择器6. 伪元素选择器7. 选择器优先级8. 总结五. CSS继承1. 什么是继承?六. CSS常用属性1. 宽和高2. 字体属性3. 文字属性4. 背景属性5. display属性六. CSS盒子模型1. margin外边距2. border边框3. padding内填充4、总结七. 使网页中的元素产生阴影八. 清除某些HTM
banne效果制作-元素的类型转换.pptx
11-01
在实际应用中，例如制作导航栏，我们可能会使用超链接`<a>`元素，并通过CSS的`display`属性将其转换为`inline-block`，以便它们并排放置，同时还能设置每个链接的宽度、高度和间距，从而创造出美观且响应式的导航...
display:inline-block兼容ie6/7的写法
湛庐无方
03-06 977
1、实例演示效果 2、 display:inline-block作用? 使用display:inline-block属性，可以使行内元素()或块元素能够不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！ 3、 什么时候会用到display:inline-block? 在网站布局中，很多时候，子元素中使用行内元素如span或块元素li标签且标签个
详解CSS display:inline-block的应用
weixin_30270889的博客
11-01 2376
本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。 基础知识 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的...
inline-block什么意思中文_css中inline-block是什么？inline-block布局的使用
weixin_35674742的博客
01-14 6438
css中inline-block是什么？本篇文章就给大家介绍在css中inline-block是什么意思，让大家了解在css布局中使用inline-block的好处。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们来了解一下inline-block是什么？inline-block表示的是行内块状元素，比如：img、input在默认情况下即为行内块状元素，即：默认情况下，di...
inline-block什么意思中文_【CSS深入】之对inline-block的理解
weixin_36382907的博客
02-23 4200
display:inline-block属性是一个很神奇且被低估的属性。inline-block即行内块元素，具体而言就是:将对象呈递为内联对象(inline)，但是对象的内容作为块对象呈递(block)，两旁的内联对象会被呈递在同一行内，允许空格。简而言之就是:inline-block的元素既具有block元素可以设置宽高的特性，同时又具有inline元素默认不换行的特性。目前浏览器支...
display：inline-block的特点和作用
a4228492的博客
02-14 622
转载于:https://www.cnblogs.com/konglxblog/p/10374526.html
html中inline与block的细节对比
samuellovefree的专栏
12-13 1005
display:block block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。 display:inline inline元素不会独占一行，多个相邻的行
display:inline、display:block、display:inline-block三者真实用途及含义是什么？
热门推荐
哈里·雪利博客
12-08 2万+
1、display:block就是将元素显示为块级元素。 　　block元素的特点是： 　　总是在新行上开始； 　　高度，行高以及顶和底边距都可控制； 　　宽度缺省是它的容器的100%，除非设定一个宽度 　　, , , , 和 是块元素的例子。 2、display:inline就是将元素显示为内联行内元素。 　　inline元素的特点是： 　　和其他元素都在一行上；
关于display的属性：block和inline-block以及inline的区别
sinat_31311369的博客
09-03 1万+
介绍一些简单的布局，block，inline-block，inline的简单区别，处女作哈哈
chrome下input[type=text]的placeholder不垂直居中的问题解决
09-19 4201
但是在chrome下显示的search word并不能垂直居中。 后来找了很久终于在stackoverflow上找到了对应的方法。 参考：http://stackoverflow.com/questions/4919680/html5-placeholder-css-pa
有几种display
最新发布
04-28
### CSS `display` 属性的主要取值及其含义 CSS 中的 `display` 属性决定了元素在文档流中的布局模式以及与其他元素的关系。以下是常见的 `display` 取值及其具体意义： #### 1. 基础显示类型 - **`block`**: 将元素作为块级元素显示，独占一行，并允许设置高度、宽度和其他尺寸属性[^3]。 - **`inline`**: 将元素作为内联元素显示，不独占一行，无法直接设定宽高以及其他垂直方向上的样式[^3]。 - **`inline-block`**: 结合了 `block` 和 `inline` 的特性，表现为内联级别但能像块级一样设置宽高等参数。 #### 2. Flexbox 相关值 - **`flex`**: 启动弹性盒子模型 (Flexbox)，使容器内的子项目按照指定规则灵活调整位置大小等[^2]。 - **`inline-flex`**: 类似于 `flex`, 不过是以行内形式展现出来的弹性盒. #### 3. Grid Layouts - **`grid`**: 定义了一个新的基于网格系统的布局机制，提供了更强大的二维空间管理能力[^4]. - **`inline-grid`**: 创建一个内联级别的网格容器[^4]. #### 4. 表格相关值 - **`table`**, **`table-row`**, **`table-cell`** 等一系列模仿 HTML 表格结构的功能选项[^5]. 这些关键字可以帮助开发者通过纯 CSS 构建复杂的表格样式的布局. #### 5. 特殊用途 - **`none`**: 让某个特定的选择器完全从渲染树中消失, 即既看不到也不占据任何物理空间[^6]. - **`contents`**: 对应的内容会被替换到父代里面去参与计算和绘制流程当中[^7], 主要适用于一些高级场景比如 SVG 或者 MathML. - **`run-in`**: 此值较为少见且浏览器支持度有限, 主要是尝试让一个小标题变成前导文字的一部分[^8]. #### 6. 列表项专用 - **`list-item`**: 把非列表标记转换成带有序号或者圆点之类的外观特征[^9]. --- ### 示例代码片段 以下是一些简单的例子来帮助理解这些不同的 display 设置如何影响页面布局: ```css /* Block Example */ .block-element { display: block; } /* Inline Example */ .inline-element { display: inline; } /* Inline-Block Example */ .inline-block-element { display: inline-block; } /* Flex Container Example */ .flex-container { display: flex; /* Additional properties can be added here as needed... */ } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值