Question

大家好，怎么把文字放在橙色圆圈旁边

我尝试使用“float：left”，但文字会从白色的文件中删除

我也使用了display：inline-block 它不起作用。

！[我希望黄色区域的文字没有超过红色的

还可以修复蓝色区域中按钮的小图片] 1

您可以查看作品Code

HTML

<div class="row">
    <div class="col-lg-6">
        <div class="row text-right">


            <div class="col-xsm-6">
                <div class="panel mini-box">
                    <div > <span class="btn-icon btn-icon-round btn-icon-lg-alt bg-danger">
                            <span class="ti-stats-up">1</span>
</span>
                    </div>
                    <div class="box-info" >
                        <p class="step" >جلب المستمسكات الا اربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات اربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكاتربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون<span class="size-h4"></span>
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Answer 1

而不是使用多个div块，除了橙色圈span之外，您可以将文字放在一个简单的span中，如下所示：

[...]
<div class="panel mini-box">
    <div style="margin-left: 5px">
         <span class="btn-icon btn-icon-round btn-icon-lg-alt bg-danger">
             <span class="ti-stats-up">1</span>
         </span>
         <span class="box-info">جلب المستمسكات الا اربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات اربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكاتربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون جلب المستمسكات الاربعة مع استنساخ ملون</span>
    </div>
</div>
[...]

请务必删除display:inline-block;元素上的.box-info。我试过你的JSfiddle，但它确实有效。

如何在跨度或图像旁边放置文本？

1 个答案: