css中inline-block的最小宽度值代码实例

作者：袖梨 2022-06-25

本篇文章小编给大家分享一下css中inline-block的最小宽度值代码实例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

具体代码如下： 




    

        我爱mother
        不爱你
        我爱你

结果演示

代码解读

两个span标签来展示凹凸的效果。span标签是行内元素。

1.首先通过display转换成行内块元素。然后宽度设置为0让span元素能够拥有最小宽度值。

2.对两个伪元素使用公共的伪元素before，伪元素不同的内容会不同的换行外边框样式为红色并且规定字体样式。

为什么要用伪元素，不用伪元素直接进行设置不行吗？是因为不用伪元素的时候文字是凹凸显示，但是边框不是，而且文字之间还会叠加和重合。

direction: rtl;是为了让文本方向从右到左，凸出来的部分正好对准凹进去的口子。

3.后面的我爱mother，不爱你会按照行内块元素的最下宽度值在before元素内容之后显示。

标签分类

块级元素

定义地址

定义表格标题

定义列表中定义条目

定义文档中的分区或节

定义列表

定义列表中的项目

定义一个框架集

创建 HTML 表单

定义最大的标题

定义副标题

定义标题

定义标题

定义标题

定义最小的标题

创建一条水平线

元素为 fieldset 元素定义标题

  • 标签定义列表项目

    为那些不支持框架的浏览器显示文本，于 frameset 元素内部 </p> <p> <noscript> 定义在脚本未被执行时的替代内容 </p> <p> <ol> 定义有序列表 </p> <p> <ul> 定义无序列表 </p> <p> <p> 标签定义段落 </p> <p> <pre> 定义预<a href="http://www.111com.net/zhuanti/geshihua/" target="_blank">格式化</a>的文本 </p> <p> <table> 标签定义 HTML 表格 </p> <p> <tbody> 标签表格主体（正文） </p> <p> <td> 表格中的标准单元格 </p> <p> <tfoot> 定义表格的页脚（脚注或表注） </p> <p> <th> 定义表头单元格 </p> <p> <thead> 标签定义表格的表头 </p> <p> <tr> 定义表格中的行 </p> <p> 行内元素 </p> <p> <a> 标签可定义锚 </p> <p> <abbr> 表示一个缩写形式 </p> <p> <acronym> 定义只取首字母缩写 </p> <p> <b> 字体加粗 </p> <p> <bdo> 可覆盖默认的文本方向 </p> <p> <big> 大号字体加粗 </p> <p> <br> 换行 </p> <p> <cite> 引用进行定义 </p> <p> <code> 定义计算机代码文本 </p> <p> <dfn> 定义一个定义项目 </p> <p> <em> 定义为强调的内容 </p> <p> <i> 斜体文本效果 </p> <p> <img> 向网页中嵌入一幅图像 </p> <p> <input> 输入框 </p> <p> <kbd> 定义键盘文本 </p> <p> <label> 标签为 input 元素定义标注（标记） </p> <p> <q> 定义短的引用 </p> <p> <samp> 定义样本文本 </p> <p> <select> 创建单选或多选菜单 </p> <p> <small> 呈现小号字体效果 </p> <p> <span> 组合文档中的行内元素//本例子当中用到了span </p> <p> <strong> 语气更强的强调的内容 </p> <p> <sub> 定义下标文本 </p> <p> <sup> 定义上标文本 </p> <p> <textarea> 多行的文本输入控件 </p> <p> <tt> 打字机或者等宽的文本效果 </p> <p> <var> 定义变量 </p> <p> 行内块元素 </p> <p> <button> 按钮 </p> <p> <del> 定义文档中已被删除的文本 </p> <p> <iframe width="650" height="400"> 创建包含另外一个文档的内联框架（即行内框架） </p> <p> <ins> 标签定义已经被插入文档中的文本 </p> <p> <map> 客户端图像映射（即热区） </p> <p> <object> object对象 </p> <p> <script> 客户端脚本 </p> </div> </div> </section> <section class="wrap-box"> <div class="g-tit"> <h2>相关文章</h2> </div> <ul class="s-list nobord notop"> <li> <a href="/art-424663.htm" class="s-card"> <div class="s-card-l"> <p class="tit">以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-31</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ba51f3b2c1.jpeg" alt="以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍" /> </div> </a> </li> <li> <a href="/art-424664.htm" class="s-card"> <div class="s-card-l"> <p class="tit">未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-31</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ba526948a1.jpeg" alt="未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍" /> </div> </a> </li> <li> <a href="/art-424662.htm" class="s-card"> <div class="s-card-l"> <p class="tit">未定事件簿左然破浪远行怎么样</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-31</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773b29eb3f551.jpeg" alt="未定事件簿左然破浪远行怎么样" /> </div> </a> </li> <li> <a href="/art-424661.htm" class="s-card"> <div class="s-card-l"> <p class="tit">桃源深处有人家行医问诊怎么玩</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-31</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773b29de06411.jpeg" alt="桃源深处有人家行医问诊怎么玩" /> </div> </a> </li> <li> <a href="/art-424660.htm" class="s-card"> <div class="s-card-l"> <p class="tit">恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-31</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ac764837c1.jpeg" alt="恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍" /> </div> </a> </li> <li> <a href="/art-424659.htm" class="s-card"> <div class="s-card-l"> <p class="tit">阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2024-12-31</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ac754a7ec1.jpeg" alt="阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍" /> </div> </a> </li> </ul> </section> <section class="wrap-box"> <div class="g-tit"> <h2>精彩推荐</h2> </div> <ul class="card-box"> <li class="card3"> <a href="/app/102607.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2e884571f1.png" alt="三国战纪2果盘渠道服 安卓版v2.41.0.0" /> </div> <p class="figure-head">三国战纪2果盘渠道服 安卓版v2.41.0.0</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/102601.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2e76652f11.png" alt="swammys进击的巨人手游 最新版v1.0" /> </div> <p class="figure-head">swammys进击的巨人手游 最新版v1.0</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/102582.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2e352defa1.png" alt="城市英雄超级忍者 最新版v1.5" /> </div> <p class="figure-head">城市英雄超级忍者 最新版v1.5</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/102543.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2dcba328b1.png" alt="黑神话悟空之再战天庭无敌版 v0.11" /> </div> <p class="figure-head">黑神话悟空之再战天庭无敌版 v0.11</p> <span class="figure-btn">下载</span> </a> </li> </ul> <ul class="card-box-b"> <li class="card10"> <a href="/app/102603.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2e789d3961.jpg" alt="米加小镇世界龙年无广告版 安卓版v1.81" /> </div> <div class="figure-cont"> <p class="figure-head">米加小镇世界龙年无广告版 安卓版v1.81</p> <div class="figure-desc"> <span>模拟经营</span> <span>米加小镇世界龙年无广告版 安卓版v1.81</span> </div> <div class="figure-desc"> <p>米加小镇世界龙年无广告是一款模拟类手游，不少的玩家可能都玩过</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/102597.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2e64beb681.png" alt="部落冲突互通服 安卓版v17.100.1" /> </div> <div class="figure-cont"> <p class="figure-head">部落冲突互通服 安卓版v17.100.1</p> <div class="figure-desc"> <span>模拟经营</span> <span>部落冲突互通服 安卓版v17.100.1</span> </div> <div class="figure-desc"> <p>部落冲突互通服是全球风靡的战争策略手游，连接安卓和iOS服务</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/102591.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2e548c3bd1.png" alt="我的世界恶魔模组资源包 (EDU HELL)最新版vDEATH" /> </div> <div class="figure-cont"> <p class="figure-head">我的世界恶魔模组资源包 (EDU HELL)最新版vDEATH</p> <div class="figure-desc"> <span>模拟经营</span> <span>我的世界恶魔模组资源包 (EDU HELL)最新版vDEATH</span> </div> <div class="figure-desc"> <p>我的世界恶魔版是一款像素风格的开放世界沙盒游戏，游戏中你可以</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/102588.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2e4ca40381.png" alt="艺术大亨天天拍卖变富翁 最新安卓版v1.31.0" /> </div> <div class="figure-cont"> <p class="figure-head">艺术大亨天天拍卖变富翁 最新安卓版v1.31.0</p> <div class="figure-desc"> <span>模拟经营</span> <span>艺术大亨天天拍卖变富翁 最新安卓版v1.31.0</span> </div> <div class="figure-desc"> <p>艺术大亨天天拍卖变富翁是一款非常好玩的模拟经营类手游，在游戏</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/102560.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250106/logo_677b2deed289f1.png" alt="大型巴士司机游戏 安卓版v2.1.0" /> </div> <div class="figure-cont"> <p class="figure-head">大型巴士司机游戏 安卓版v2.1.0</p> <div class="figure-desc"> <span>模拟经营</span> <span>大型巴士司机游戏 安卓版v2.1.0</span> </div> <div class="figure-desc"> <p>大型巴士司机是一款模拟驾驶类游戏，玩家们将在游戏中化身为大巴</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> </ul> </section> <footer class="foot"> <a href="/" class="logo-icon"> <img src="/mobile/images/logo2.png" alt="一聚教程网"> </a> <p>Copyright © 2010-2022</p> <p>111cn.net All Rights Reserved</p> </footer> <script> var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"}; </script> <script src="/jspc/funcmob.js" type="text/javascript"></script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DSRRGRV1TL'); </script> <div class="back-top" style="display: block;"> <span class="icon-box"> <svg class="icon" viewBox="0 0 1024 1024"> <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path> </svg> </span> </div> </div> <script src="/js/stat.js"></script> </body> </html>