css制作提示小图标（内容撑开盒子）

最新推荐文章于 2024-07-20 12:05:48 发布

忘川...

最新推荐文章于 2024-07-20 12:05:48 发布

阅读量1.2k

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_46664185/article/details/120123633

版权

本文介绍了如何通过设置元素的内边距（padding）来撑开盒子，并利用定位（position）实现小图标提示效果。通过将行内元素转换为行内块元素并设置padding，可以不指定宽度地控制元素大小。同时，利用绝对定位可以精确调整小图标的位置，创建出美观的UI效果。

摘要由CSDN通过智能技术生成

一、内容撑开盒子：不设置盒子宽度，给盒子设置左右内边距撑开盒子(padding: 0 10px;)

注意行内元素不能设置长宽，需要先将其转换为行内块元素或者块级元素（display: inline-block;）

    display: inline-block;
    padding: 0 10px;
    height: 20px;

二、用于提示的小图标可用定位，设置位偏移，实现想要的效果

.card .tag {
    display: inline-block;
    padding: 0 10px;
    height: 20px;
    background: #e6f7ff;
    font-size: 14px;
    color: #1296db;
    border-radius: .83em;
    text-align: center;
    position: absolute;
    top: -3px;
    right: 12px;
}

效果如下：