在此处输入图像说明

我想让圆圈离实际的单词有点远，但它已经粘住了，我不知道如何修复它。

以下是我的代码如何修复它

HTML:

<div className="StudentNameBox">

    <div className="StudentName"><span class="dot"></span>Student Name</div>
    <div className="StudentName2"><span class="dot"></span>Student Name</div>

      </div>

CSS:

<div className="StudentNameBox">

    <div className="StudentName"><span class="dot"></span>Student Name</div>
    <div className="StudentName2"><span class="dot"></span>Student Name</div>

      </div>

顺晟科技：

我使用了display flex来解决这个问题，还有，为什么要将span标记作为div的直接shilf，这是没有意义的

HTML代码

<div className="StudentNameBox">

    <div className="StudentName"><span class="dot"></span>Student Name</div>
    <div className="StudentName2"><span class="dot"></span>Student Name</div>

      </div>

CSS代码

<div className="StudentNameBox">

    <div className="StudentName"><span class="dot"></span>Student Name</div>
    <div className="StudentName2"><span class="dot"></span>Student Name</div>

      </div>

添加边距-右。这将为您提供额外的空间。

您可以使用flex，不仅可以在元素之间创建间隙，还可以将元素居中，这样看起来更干净。

<div className="StudentNameBox">

    <div className="StudentName"><span class="dot"></span>Student Name</div>
    <div className="StudentName2"><span class="dot"></span>Student Name</div>

      </div>

您不需要该类，因为它与。只需将类也应用到第二个元素。

需要向类添加填充。

<div className="StudentNameBox">

    <div className="StudentName"><span class="dot"></span>Student Name</div>
    <div className="StudentName2"><span class="dot"></span>Student Name</div>

      </div>