CSS实现圆点

最新推荐文章于 2024-03-07 14:05:47 发布

来年可期

最新推荐文章于 2024-03-07 14:05:47 发布

阅读量1.9w

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_35628430/article/details/98486817

本文介绍了一种使用CSS创建圆形图标并将其与文本水平排列的方法。通过设置宽度、高度、背景颜色及圆点半径，可以实现红色圆形图标。同时，通过display属性使圆点与文本水平显示。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .circle{
            <!--设置圆点的宽、高、背景颜色，再设置圆点半径所占百分比-->
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%; 
            <!--设置圆点与其后面的内容水平显示-->
            display: inline-block;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="circle"></div><span>你好</span>
</body>
</html>

运行结果：