、
、
等，表现得像文本一样，与其他内容在同一行内流动，并且不强制换行，那么你需要使用
display: inline;。
例如，如果你想让几个
<ul>
<li style="display: inline; margin-right: 10px;">首页</li>
<li style="display: inline; margin-right: 10px;">产品</li>
<li style="display: inline;">联系我们</li>
</ul>
这样设置后，这些display: inline;后，它将失去设置宽度、高度以及垂直方向margin和padding的能力。它的尺寸将由其内容决定，并且垂直方向的margin和padding将不起作用。
兼具两者优势的 display: inline-block;：
在实际开发中，我们常常会遇到这样一种需求：既希望元素能像行内元素一样在同一行排列，又希望它能像块级元素一样可以设置宽度、高度和垂直方向的内外边距。这时，display: inline-block;就是你的不二之选。
它结合了inline和block的优点：
- 行内特性： 元素会像行内元素一样，在同一行内从左到右排列，如果空间不足才会换行。
- 块级特性： 你可以为它设置
width、height、margin-top、margin-bottom、padding-top、padding-bottom等属性。
例如，制作一个水平排列的导航菜单，每个菜单项都需要有固定的宽度和高度：
<nav>
<a href="#" style="display: inline-block; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #f0f0f0; margin-right: 5px;">菜单项1</a>
<a href="#" style="display: inline-block; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #f0f0f0; margin-right: 5px;">菜单项2</a>
<a href="#" style="display: inline-block; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #f0f0f0;">菜单项3</a>
</nav>
这种混合模式在很多布局场景中都非常实用，比如图片画廊、卡片布局、水平导航等，它提供了一种比纯粹的block或inline更灵活的布局方式。在选择使用哪种display类型时，总是要根据元素的具体内容和它在整体布局中的角色来决定。
终于介绍完啦！小伙伴们，这篇关于《块级元素设置方法及常用标签详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！
