一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > 设计基础

推荐专题

最新下载

热门教程

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

时间：2019-12-16 编辑：袖梨 来源：一聚教程网

本篇文章小编给大家分享一下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 class="pages art-detail"> </div> <ul class="TurnPage"> <li class="TurnPage-left"> <p> <span>上一个：</span> <a href="https://www.111com.net/wy/180633.htm" class="maxWidth">better-scroll如何实现菜单和内容联动效果 better-scroll实现菜单和内容联动效果代码</a> </p> </li> <li class="TurnPage-right"> <p> <span>下一个：</span> <a href="https://www.111com.net/wy/180717.htm" class="maxWidth">css3如何实现背景动态渐变效果 css3实现背景动态渐变效果代码示例</a> </p> </li> </ul> <div class="articles"> <div class="tit02"> <h4>相关文章</h4> </div> <ul> <li> <a target="_blank" href="https://www.111com.net/cssdiv/228446.htm">CSS 鼠标点击拖拽效果代码展示</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/cssdiv/228445.htm">CSS使用SVG实现动态分布的圆环发散路径动画教程</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/cssdiv/227278.htm">CSS组合选择器解析</a> <span>10-26</span> </li> <li> <a target="_blank" href="https://www.111com.net/cssdiv/227276.htm">css带搜索导航栏的代码展示</a> <span>10-26</span> </li> <li> <a target="_blank" href="https://www.111com.net/cssdiv/227258.htm">css复合选择器的具体使用方法介绍</a> <span>10-26</span> </li> <li> <a target="_blank" href="https://www.111com.net/cssdiv/227253.htm">css三列自适应布局教程</a> <span>10-26</span> </li> </ul> </div> </div> </div> </div> </div> <div class="hot-column"> <div class="cont"> <div class="tit"> <h4>热门栏目</h4> </div> <ul class="clearfix"> <li> <h6><a href="https://www.111com.net/phper/php.html" target="_blank">php教程</a></h6> <a href="https://www.111com.net/list-45/" target="_blank">php入门</a> <a href="https://www.111com.net/list-46/" target="_blank">php安全</a> <a href="https://www.111com.net/list-47/" target="_blank">php安装</a> <a href="https://www.111com.net/list-48/" target="_blank">php常用代码</a> <a href="https://www.111com.net/list-49/" target="_blank">php高级应用</a> </li> <li> <h6><a href="https://www.111com.net/net/net.html" target="_blank">asp.net教程</a></h6> <a href="https://www.111com.net/list-78/" target="_blank">基础入门</a> <a href="https://www.111com.net/list-79/" target="_blank">.Net开发</a> <a href="https://www.111com.net/list-80/" target="_blank">C语言</a> <a href="https://www.111com.net/list-81/" target="_blank">VB.Net语言</a> <a href="https://www.111com.net/list-82/" target="_blank">WebService</a> </li> <li> <h6><a href="https://www.111com.net/sj/index.html" target="_blank">手机开发</a></h6> <a href="https://www.111com.net/list-208/" target="_blank">安卓教程</a> <a href="https://www.111com.net/list-209/" target="_blank">ios7教程</a> <a href="https://www.111com.net/list-210/" target="_blank">Windows Phone</a> <a href="https://www.111com.net/list-211/" target="_blank">Windows Mobile</a> <a href="https://www.111com.net/list-212/" target="_blank">手机常见问题</a> </li> <li> <h6><a href="https://www.111com.net/cssdiv/css.html" target="_blank">css教程</a></h6> <a href="https://www.111com.net/list-99/" target="_blank">CSS入门</a> <a href="https://www.111com.net/list-100/" target="_blank">常用代码</a> <a href="https://www.111com.net/list-101/" target="_blank">经典案例</a> <a href="https://www.111com.net/list-102/" target="_blank">样式布局</a> <a href="https://www.111com.net/list-103/" target="_blank">高级应用</a> </li> <li> <h6><a href="https://www.111com.net/wy/yw.html" target="_blank">网页制作</a></h6> <a href="https://www.111com.net/list-136/" target="_blank">设计基础</a> <a href="https://www.111com.net/list-137/" target="_blank">Dreamweaver</a> <a href="https://www.111com.net/list-138/" target="_blank">Frontpage</a> <a href="https://www.111com.net/list-139/" target="_blank">js教程</a> <a href="https://www.111com.net/list-140/" target="_blank">XNL/XSLT</a> </li> <li> <h6><a href="https://www.111com.net/office/index.html" target="_blank">办公数码</a></h6> <a href="https://www.111com.net/list-236/" target="_blank">word</a> <a href="https://www.111com.net/list-237/" target="_blank">excel</a> <a href="https://www.111com.net/list-238/" target="_blank">powerpoint</a> <a href="https://www.111com.net/list-239/" target="_blank">金山WPS</a> <a href="https://www.111com.net/list-240/" target="_blank">电脑新手</a> </li> <li> <h6><a href="https://www.111com.net/jsp/jsp.html" target="_blank">jsp教程</a></h6> <a href="https://www.111com.net/list-68/" target="_blank">Application与Applet</a> <a href="https://www.111com.net/list-69/" target="_blank">J2EE/EJB/服务器</a> <a href="https://www.111com.net/list-70/" target="_blank">J2ME开发</a> <a href="https://www.111com.net/list-71/" target="_blank">Java基础</a> <a href="https://www.111com.net/list-72/" target="_blank">Java技巧及代码</a> </li> </ul> </div> </div> <div class="footer"> <div class="cont"> <p> <a href="https://www.111com.net/" target="_self">一聚教程网</a>| <a href="https://www.111com.net/us/us.html" class="about" target="_self">关于我们</a>| <a href="https://www.111com.net/us/me.html" class="contact" target="_self">联系我们</a>| <a href="https://www.111com.net/us/ads.html" class="gg_contact" target="_self">广告合作</a>| <a href="https://www.111com.net/us/link.html" class="friend_link" target="_self">友情链接</a>| <a href="https://www.111com.net/us/bcinfo.html" class="copyright_notice" target="_self">版权声明</a> </p> <p> <span>copyRight@2007-2024 www.111COM.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian">苏ICP备17065847号-2</a> </span> </p> <p> <span> 网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理 </span> </p> </div> </div> <script src="https://assets.111com.net/js/stat.js?v=2024022101"></script> <script src="https://api.111com.net/api/stat/hits?type=article&id=180675"></script> </body> </html>